🎃

Typescript(コンパイルについて)

2023/03/04に公開

TypeScriptコンパイル入門

TypeScriptはJavaScriptの強力な静的型付けの機能を提供し、開発者がより堅牢なコードを書くのを支援するために設計されたプログラミング言語です。TypeScriptはJavaScriptにコンパイルされるため、プログラマーはTypeScriptでコードを書くことができますが、最終的にはJavaScriptで実行されます。TypeScriptコンパイラは、TypeScriptコードをJavaScriptコードに変換するプログラムです。

この記事では、TypeScriptコンパイルの基本的な概念と方法について説明します。

TypeScriptコンパイルの基本

TypeScriptコンパイルは、TypeScriptファイルをJavaScriptファイルに変換するプロセスです。TypeScriptファイルは、.ts拡張子を持ち、JavaScriptファイルは、.js拡張子を持ちます。TypeScriptコンパイラは、TypeScriptファイルをトランスパイルし、JavaScriptファイルを生成します。TypeScriptファイルをJavaScriptファイルにコンパイルするには、以下の手順に従います。

  1. TypeScriptファイルを用意する
  2. TypeScriptコンパイラをインストールする
  3. tsconfig.jsonファイルを作成する
  4. TypeScriptファイルをコンパイルする

1. TypeScriptファイルを用意する

最初に、TypeScriptファイルを用意する必要があります。TypeScriptファイルは、.ts拡張子を持ち、JavaScriptファイルと同じように、テキストファイルで書かれています。以下は、簡単なTypeScriptファイルの例です。

// greet.ts
function greet(name: string) {
    console.log(`Hello, ${name}!`);
}
greet("World");

2. TypeScriptコンパイラをインストールする

TypeScriptコンパイラを使用するには、まずTypeScriptをインストールする必要があります。TypeScriptをインストールするには、以下のコマンドを実行します。

npm install -g typescript

3. tsconfig.jsonファイルを作成する

次に、tsconfig.jsonファイルを作成する必要があります。tsconfig.jsonファイルは、TypeScriptコンパイラが使用する設定ファイルです。以下は、tsconfig.jsonファイルの例です。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true
  },
  "include": [
    "src/**/*"
  ]
}

上記の例では、以下の設定を指定しています。

target: コンパイルされたJavaScriptコード
の実行環境として使用されるECMAScriptのバージョンを指定します。この例では、ES5を指定しています。
module: TypeScriptファイルがどのモジュールシステムを使用するかを指定します。この例では、commonjsを指定しています。
outDir: コンパイルされたJavaScriptファイルを出力するディレクトリを指定します。この例では、distディレクトリに出力されます。
strict: 厳密な型チェックを有効にするかどうかを指定します。
includeキーの値は、TypeScriptファイルが含まれているディレクトリまたはファイルを指定します。上記の例では、srcディレクトリ以下にあるすべてのファイルが含まれます。

4. TypeScriptファイルをコンパイルする

最後に、TypeScriptファイルをコンパイルします。TypeScriptファイルをコンパイルするには、以下のコマンドを実行します。

tsc

このコマンドは、カレントディレクトリのすべてのTypeScriptファイルをコンパイルし、tsconfig.jsonファイルで指定された設定を使用してJavaScriptファイルを出力します。

上記の例で、distディレクトリにJavaScriptファイルが出力されます。greet.tsファイルから生成されたJavaScriptファイルは、以下のようになります。

// greet.js
function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("World");

まとめ

TypeScriptコンパイルは、TypeScriptファイルをJavaScriptファイルに変換するプロセスです。TypeScriptコンパイラを使用して、TypeScriptファイルをコンパイルし、静的型チェックを有効にして、堅牢なコードを書くことができます。また、tsconfig.jsonファイルを使用して、TypeScriptコンパイラの設定をカスタマイズすることができます。

Discussion