JavaScriptからTypeScriptへ移行する方法
JavaScriptのプロジェクトに取り組んでいて、技術スタックにTypeScriptを追加することを検討している場合、何から始めればよいのか悩んでしまうかもしれません。幸いなことに、JavaScriptのコードをTypeScriptに移行するプロセスは比較的簡単です。
この記事では、JavaScriptプロジェクトにTypeScriptを追加する手順を説明します。
ステップ1: TypeScriptのインストール
最初のステップは、プロジェクトにTypeScriptをインストールすることです。これはnpmパッケージマネージャを使用して行うことができます。ターミナルを開き、プロジェクトのルートディレクトリに移動します。
そして、以下のコマンドを実行します。
npm install typescript --save-devこれで、TypeScriptパッケージがプロジェクトにインストールされ、dev依存として保存されます。dev依存はアプリの開発中に必要となるパッケージです。これは、テストライブラリ、コード品質ツール、フロントエンドアセットのバンドルなど、さまざまなものになります。
ステップ2: tsconfig.jsonの作成
次に、tsconfig.jsonファイルを作成する必要があります。このファイルには、コンパイラのオプション、ターゲットをトランスパイルするための設定、その他の構成オプションが含まれています。
プロジェクト内でJavaScriptとTypeScriptを共存させたい場合は、tsconfig.jsonファイルの「allowJs」オプションをtrueに設定する必要があります。これはTypeScriptコンパイラに、JavaScriptファイルもコンパイルするように指示するものです。
以下は、tsconfig.jsonファイルの例です。
{
"compilerOptions": {
"allowJs": true
}
}このファイルは、プロジェクト固有のニーズに応じてカスタマイズすることができます。tsconfig.jsonファイルの詳細については、公式ドキュメントをご確認ください。
ステップ3: TypeScriptへのコードの変換と追記
TypeScriptのセットアップが完了したら、TypeScriptファイルをプロジェクトに追加する作業を開始します。また、既存のJavaScriptファイルをTypeScriptに変換することもできます。
これを行うには、コードに型定義を追加する必要があります。これには主に2つの方法があります。
tsファイルに直接型定義を追加する
TypeScriptファイルの中で、変数や関数に直接型注釈を追加することができます。例えば、文字列であるべき変数「name」がある場合、以下のように定義することができます。
let name: string = "John";.d.tsファイルに型定義を追加する
コードと型定義を別々にしたい場合、型定義だけを含む.d.tsファイルを作成することができます。これらのファイルは、プロジェクトのルートにある「types」ディレクトリに配置する必要があります。例えば、文字列であるべき変数「name」がある場合、次のような内容の「mytypes.d.ts」ファイルを作成することができます。
declare let name: string;既存のJavaScriptのコードをTypeScriptに変換する場合、型エラーなどの問題に遭遇する可能性が高いので、コードが正しく動作するようにこれらのエラーを修正する必要があります。
ステップ4: コンパイル
TypeScriptファイルと型定義をプロジェクトに追加したら、TypeScriptのコードをJavaScriptにコンパイルすることができます。これを行うには、ターミナルで以下のコマンドを実行します。
tsc main.tsすると、TypeScriptファイルと同じディレクトリに、main.jsという名前のJavaScriptファイルが作成されます。
上記のようなプロセスを踏むことがJavaScriptのプロジェクトでTypeScriptを使用し始める方法の一つです。
この記事を書いた人
Jeffry Alvarado
Ex-Facebook Engineer 大学ではコンピュータサイエンスを専攻し、在学中に複数のインターンシップを経験。コンピュータサイエンスが学習できるプラットフォームRecursionを創業し、CTOとしてカリキュラム作成、ソフトウェア開発を担当。
