JSDoc 형식 주석을 다리로 활용하기

TypeScript로 연결하는 JSDoc 다리

/** @type {string} */
let name = "Alice"; // TypeScript checks this as string

@param과 @returns

/**
 * @param {string} name
 * @param {number} age
 * @returns {string}
 */
function greet(name, age) {
  return `${name} is ${age}`;
}

객체 타입에 @typedef 사용하기

/**
 * @typedef {Object} User
 * @property {string} id
 * @property {string} name
 * @property {boolean} isActive
 */

/** @type {User} */
const user = { id: "1", name: "Alice", isActive: true };

제네릭에 @template 사용하기

/**
 * @template T
 * @param {T[]} arr
 * @returns {T | undefined}
 */
function first(arr) {
  return arr[0];
}
// TypeScript infers: first<T>(arr: T[]): T | undefined

.ts 파일에서 타입 가져오기

/** @type {import("./types").User} */
const admin = { id: "admin", name: "Admin", isActive: true };

파일별 검사에 @ts-check 사용하기

// @ts-check
/** @type {number} */
const count = "oops"; // Error: string not assignable to number

@ts-ignore와 @ts-expect-error

// @ts-ignore
const x = badFunction(); // single error suppressed

// @ts-expect-error
const y = anotherBad(); // error expected here

JSDoc 열거형

/** @enum {string} */
const Direction = { Left: "left", Right: "right", Up: "up" };

JSDoc의 타입 단언

const el = /** @type {HTMLInputElement} */ (document.getElementById("input"));
el.value; // el: HTMLInputElement — typed

.ts로 옮길 시점

// Rename: utils.js → utils.ts
// Replace JSDoc: /** @param {string} x */ → (x: string)

복습: 다리 역할을 하는 JSDoc

빠른 확인

학습 내용