TypeScript を利用した JS プロジェクト

TypeScriptの型システムは、コードベースを扱う際に異なるレベルの厳密さを持ちます。

• JavaScriptコードによる推論のみに基づいた型システム
• JSDoc経由でのJavaScriptでのインクリメンタル型付け
• JavaScriptファイルでの// @ts-checkの使用
• TypeScriptコード
• strictが有効になっているTypeScript

各ステップは、より安全な型システムへの移行を表していますが、すべてのプロジェクトがそのレベルの検証を必要とするわけではありません。

JavaScriptでのTypeScript

これは、TypeScriptを使用して、オートコンプリート、シンボルへのジャンプ、名前変更などのリファクタリングツールなどのツールを提供するエディターを使用する場合です。ホームページには、TypeScriptプラグインを備えたエディターのリストがあります。

JSDoc経由でJSに型ヒントを提供する

.jsファイルでは、型は多くの場合推論できます。型を推論できない場合は、JSDoc構文を使用して指定できます。

JSDocアノテーションは、宣言の型を設定するために、宣言の前に記述されます。例:

js
/** @type {number} */
var x;
 
x = 0; // OK
x = false; // OK?!Try

サポートされているJSDocパターンの完全なリストは、JSDocでサポートされている型にあります。

@ts-check

前のコードサンプルの最後の行はTypeScriptでエラーが発生しますが、JSプロジェクトではデフォルトでは発生しません。JavaScriptファイルでエラーを有効にするには、.jsファイルの最初の行に // @ts-check を追加して、TypeScriptでエラーが発生するようにします。

js
// @ts-check
/** @type {number} */
var x;
 
x = 0; // OK
x = false; // Not OK
Type 'boolean' is not assignable to type 'number'.2322Type 'boolean' is not assignable to type 'number'.Try

エラーを追加するJavaScriptファイルがたくさんある場合は、jsconfig.jsonの使用に切り替えることができます。ファイルに// @ts-nocheckコメントを追加すると、一部のファイルのチェックをスキップできます。

TypeScriptが、同意できないエラーを提示する場合があります。そのような場合は、先行行に// @ts-ignoreまたは// @ts-expect-errorを追加して、特定の行のエラーを無視できます。

js
// @ts-check
/** @type {number} */
var x;
 
x = 0; // OK
// @ts-expect-error
x = false; // Not OKTry

TypeScriptによるJavaScriptの解釈方法の詳細については、TSがJSの型をチェックする方法を参照してください。