ts-check-jsdoc-experiment

@ts-check と JSDoc を使って TypeScript を試す

概要

JavaScript ファイルを TypeScript に変換しなくても、TypeScript の型チェックを追加できます。JS ファイルの先頭で @ts-check を使用し、JSDoc アノテーションで型を追加します。これにより、完全な変換に踏み切ることなく、段階的に TypeScript を試せます。

このスキルを使う場面

• TypeScript を試す
• JavaScript を段階的に移行する
• JS ファイルに型を追加する
• TypeScript を学ぶチーム
• 型を使って JavaScript を検証する

絶対に守るルール

完全な変換を行わずに、@ts-check と JSDoc を使って JavaScript ファイルに TypeScript のチェックを追加します。

例

// @ts-check

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

greet('Alice', 30); // OK
greet('Alice', '30'); // Type error!

/** @type {string[]} */
const names = ['Alice', 'Bob'];

/** @typedef {{ x: number, y: number }} Point */
/** @type {Point} */
const point = { x: 1, y: 2 };

参考資料

• Effective TypeScript, 2nd Edition（Dan Vanderkam 著）
• 項目 80：@ts-check と JSDoc を使って TypeScript を試す