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

TypeScriptの型システムがコードベースを扱う際には、様々な厳密さのレベルがあります:

• JavaScriptのコードを使った推論のみに基づく型システム
• JSDocによるJavaScriptの段階的な型付け
• JavaScriptファイルにおける// @ts-checkの使用
• TypeScriptコード
• strictを有効にしたTypeScript

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

JavaScriptと併用するTypeScript

こちらは、オートコンプリートやシンボルへのジャンプといった機能や、リネームなどのリファクタリングツールを提供するためにTypeScriptを使用しているエディタを使う場合です。 homepageでは、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; // エラー
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; // エラーTry

JavaScriptがTypeScriptによってどのように解釈されるかについて知りたい場合は、TSの型がJSをチェックする方法を参照してください。