橋渡しとしてのJSDoc型注釈
変換前にJSDocを使ってJSファイルに型を追加します。
「橋渡しとしてのJSDoc型注釈」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
TypeScriptへの橋渡しとしてのJSDoc
checkJs: trueを有効にすると、TypeScriptはJavaScriptファイル内のJSDoc型アノテーションを読み取れます。これにより、ファイル名を変更せずにJSへ型を追加できます。
/** @type {string} */
let name = "Alice"; // TypeScript checks this as string@paramと@returns
JSDocタグを使って、関数のパラメーターと戻り値の型をアノテーションします。
/**
* @param {string} name
* @param {number} age
* @returns {string}
*/
function greet(name, age) {
return `${name} is ${age}`;
}@typedefによるオブジェクト型
@typedefを使うと、JSDocで再利用可能な型エイリアスを定義できます。
/**
* @typedef {Object} User
* @property {string} id
* @property {string} name
* @property {boolean} isActive
*/
/** @type {User} */
const user = { id: "1", name: "Alice", isActive: true };@templateによるジェネリクス
@templateを使うと、JSDocでジェネリック関数を記述できます。
/**
* @template T
* @param {T[]} arr
* @returns {T | undefined}
*/
function first(arr) {
return arr[0];
}
// TypeScript infers: first<T>(arr: T[]): T | undefined.tsファイルからの型のインポート
JSDocでは、@type {import("./types").User}を使ってTypeScriptの型をJSファイルにインポートできます。
/** @type {import("./types").User} */
const admin = { id: "admin", name: "Admin", isActive: true };@ts-checkによるファイル単位のチェック
JSファイルの先頭に// @ts-checkを追加すると、グローバルにcheckJs: trueを設定せず、そのファイルだけでTypeScriptのチェックを有効にできます。
// @ts-check
/** @type {number} */
const count = "oops"; // Error: string not assignable to number@ts-ignoreと@ts-expect-error
インラインディレクティブを使うと、ファイル全体を無効にせず、特定のJSDoc型エラーを抑制できます。
// @ts-ignore
const x = badFunction(); // single error suppressed
// @ts-expect-error
const y = anotherBad(); // error expected hereJSDocの列挙型
@enumを使うと、JSDocでTypeScriptの列挙型を再現できます。
/** @enum {string} */
const Direction = { Left: "left", Right: "right", Up: "up" };JSDocでの型アサーション
JSDocでの型アサーションには/** @type {SomeType} */ (expression)を使います。これはTypeScriptのas SomeTypeに相当します。
const el = /** @type {HTMLInputElement} */ (document.getElementById("input"));
el.value; // el: HTMLInputElement — typed.tsへ移行するタイミング
JSDocアノテーションは橋渡しであり、最終目的地ではありません。ファイルに必要なアノテーションをすべて付けて安定したら、.tsに名前を変更し、JSDocの型コメントを削除してネイティブなTypeScript構文に置き換えます。
// Rename: utils.js → utils.ts
// Replace JSDoc: /** @param {string} x */ → (x: string)まとめ：JSDocによる橋渡し
JSDoc型アノテーションを使うと、ファイル名を変更せずにJSファイルでTypeScriptのチェックを有効にできます。@type、@param、@typedef、@templateを使って段階的に型安全性を高めてから、ネイティブなTypeScriptへ変換しましょう。
確認問題
グローバルなcheckJsを使わずに、1つのファイルでTypeScriptのチェックを有効にするJSDocタグはどれですか？
学んだこと
JSDoc型アノテーションはJavaScriptとTypeScriptの橋渡しになります。@type、@param、@typedef、@templateを使ってJSファイルに型を追加します。// @ts-checkでファイル単位のチェックを有効にし、準備ができたらネイティブなTypeScriptへ変換します。
よくある質問
「橋渡しとしてのJSDoc型注釈」レッスンは無料ですか？
はい。「橋渡しとしてのJSDoc型注釈」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「橋渡しとしてのJSDoc型注釈」で何を学びますか？
変換前にJSDocを使ってJSファイルに型を追加します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「橋渡しとしてのJSDoc型注釈」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 移行の開始：allowJsとcheckJs
- 橋渡しとしてのJSDoc型注釈
- ファイル単位の変換戦略
- 型のないサードパーティライブラリへの対応