TypeScript コンパイル入門

TypeScriptのすべてのソースを視聴・コンパイルする方法

日本語説明

TypeScriptは、JavaScriptのスーパーセットであり、静的型付けの機能を追加します。これは、開発プロセスをよりスムーズにし、エラーを早期に検出するのに役立ちます。

視聴 (Watching)

TypeScriptソースコードに変更を加えると、コンパイラが自動的にコードを監視し、必要に応じて再コンパイルします。これにより、手動でコンパイルする手間が省けます。

コンパイル (Compiling)

TypeScriptコードをコンパイルすると、JavaScriptコードに変換されます。この変換により、ブラウザやNode.jsなどのJavaScript実行環境で実行できるようになります。

手順

1. TypeScriptのインストール
   

2. tsconfig.jsonファイルの作成
   

3. コンパイルコマンド
   

   • tsc (すべてのソースをコンパイル)
   • tsc --watch (変更を監視して自動的にコンパイル)

例

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist"
  }
}

この設定では、TypeScriptコードをES5のJavaScriptに変換し、CommonJSモジュール形式でdistディレクトリに出力します。

• TypeScriptの学習は、JavaScriptの知識を前提とします。JavaScriptの基本的な概念を理解していることが重要です。
• TypeScriptは、IDEやエディタとの統合もサポートしています。これにより、コードの補完、エラーチェック、リファクタリングなどの機能を利用できます。
• TypeScriptのコンパイラは、さまざまなオプションを提供しています。例えば、モジュールシステム、ターゲットESバージョン、出力ファイルの形式などを指定できます。

tsc --watch

このコマンドを実行すると、コンパイラが現在のディレクトリ内のすべてのTypeScriptファイル（.ts拡張子）を監視し、変更が加えられると自動的にJavaScriptファイル（.js拡張子）を生成します。

TypeScript コンパイル入門

以下のコードは、TypeScriptのコンパイルの基本的な例です。

// app.ts
let message: string = "Hello, TypeScript!";
console.log(message);

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist"
  }
}

tsc

この例では、app.tsというTypeScriptファイルを作成し、メッセージを出力するコードを書いています。tsconfig.jsonファイルは、コンパイラの設定を定義しています。tscコマンドを実行すると、app.tsがコンパイルされ、distディレクトリにapp.jsというJavaScriptファイルが生成されます。

• outDirオプションは、コンパイル後のJavaScriptファイルの出力ディレクトリを指定します。
• moduleオプションは、モジュールシステムを指定します。
• targetオプションは、コンパイル後のJavaScriptのターゲットESバージョンを指定します。

IDEやエディタのプラグイン:

多くのIDEやエディタには、TypeScriptのサポートが組み込まれています。これらのツールのプラグインを使用して、自動コンパイルやエラーチェックなどの機能を利用できます。

• WebStormのTypeScriptサポート
• Visual Studio CodeのTypeScriptプラグイン

npmスクリプト: