JSでの// @ts-check、型取得のためのJSDoc
// @ts-checkとJSDocで.jsの型チェックを有効にし、@param/@returns、@type/@typedef、@templateを追加してジェネリックパターンを表現し、段階的な移行に向けてtsconfigを設定します
「JSでの// @ts-check、型取得のためのJSDoc」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全1レッスンが含まれています。
はじめに
目標:.js ファイル内で TypeScript のメリットを得ます。// @ts-check を有効にし、JSDoc 型を追加して、段階的な導入に向けて tsconfig を設定します。
- ファイル単位とプロジェクト全体のチェック
- @param、@returns、@type、@typedef
- ジェネリックに近いヘルパー用の @template
チェックを有効にする
.js ファイルの先頭に // @ts-check を追加します。@param/@returns を使って関数をドキュメント化し、型を付けます。
// calculator.js
// @ts-check
/**
* Adds two numbers.
* @param {number} a
* @param {number} b
* @returns {number}
*/
export function add(a, b) {
return a + b
}
// Usage: type errors appear if you pass non-numbers
// add("2", 3) // TS will flag this in JStypedef と type
再利用可能な形状を定義するには @typedef を使い、変数に注釈を付けるには @type を使います。オプションのフィールドは ? で示します。
// models.js
// @ts-check
/** @typedef {{ id: string; name: string; age?: number }} User */
/** @type {User} */
export const currentUser = { id: "u1", name: "Ada" }
/**
* Greets a user.
* @param {User} u
* @returns {string}
*/
export function greet(u) {
return `Hello, ${u.name}!`
}template パラメーター
@template は JS のジェネリックに近い関数に型パラメーターを導入します。呼び出し箇所では型推論が機能します。
// helpers.js
// @ts-check
/**
* Maps items with a function, preserving types.
* @template T,U
* @param {T[]} items
* @param {(x: T) => U} f
* @returns {U[]}
*/
export function map(items, f) {
const out = []
for (const x of items) out.push(f(x))
return out
}
// Inference: T=number, U=string
// map([1,2], n => n.toFixed(2))JS 用 tsconfig
プロジェクト全体では、すべての .js ファイルに対して checkJs を有効にします。allowJs を設定して JS ファイルをプログラムに含めます。バンドラーが出力を処理する場合は noEmit を使います。
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"checkJs": true,
"allowJs": true,
"strict": true,
"noEmit": true
},
"include": ["./**/*.js"],
"exclude": ["node_modules"]
}移行のヒント
移行のヒント:
// @ts-checkを使い、まずは重要なファイルから始めます。- 共有する形状には小さな
@typedefを作成します。 - 型が安定したら、重要な処理経路を段階的に
.tsへ名前変更します。
ts-check の確認
確認問題:.js ファイルで TS のチェックを有効にするにはどうしますか?
まとめ
まとめ:// @ts-check を有効にし、@param/@returns/@typedef/@template を追加して、.ts へ移行する前に JS プロジェクトの tsconfig を厳格化します。
AI チューターと学ぶ TypeScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 101
- レッスン
- 352
よくある質問
「JSでの// @ts-check、型取得のためのJSDoc」レッスンは無料ですか?
はい。「JSでの// @ts-check、型取得のためのJSDoc」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全1レッスンが含まれています。
「JSでの// @ts-check、型取得のためのJSDoc」で何を学びますか?
// @ts-checkとJSDocで.jsの型チェックを有効にし、@param/@returns、@type/@typedef、@templateを追加してジェネリックパターンを表現し、段階的な移行に向けてtsconfigを設定します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。
「JSでの// @ts-check、型取得のためのJSDoc」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか?
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。