TypeScript の動作概要 • TypeScript 入門

4章 TypeScript の動作概要

本章では、TypeScript の動作概要について説明します。典型的な TypeScript プロジェクトの構造とは？何がどのようにコンパイルされるのか？IDE を使用して TypeScript を記述するにはどうすればよいか？

4.1章 TypeScript プロジェクトの構造

これは、TypeScript プロジェクトのファイル構造の一例です。

typescript-project/
  dist/
  ts/
    src/
      main.ts
      util.ts
    test/
      util_test.ts
  tsconfig.json

説明

ts/ ディレクトリには、TypeScript ファイルが含まれています。
- ts/src/ サブディレクトリには、実際のコードが含まれています。
- ts/test/ サブディレクトリには、コードのテストが含まれています。
dist/ ディレクトリには、コンパイラの出力結果が格納されます。
TypeScript コンパイラは、ts/ 内の TypeScript ファイルを dist/ 内の JavaScript ファイルにコンパイルします。例：
- ts/src/main.ts は dist/src/main.js にコンパイルされます（その他のファイルが生成される可能性もあります）。
tsconfig.json は、TypeScript コンパイラの設定に使用されます。

4.1.1章 `tsconfig.json`

tsconfig.json の内容は次のようになります。

{
  "compilerOptions": {
    "rootDir": "ts",
    "outDir": "dist",
    "module": "commonjs",
    ···
  }
}

次のように指定しました。

TypeScript コードのルートディレクトリは ts/ です。
TypeScript コンパイラが出力結果を保存するディレクトリは dist/ です。
出力ファイルのモジュール形式は CommonJS です。

4.2章統合開発環境 (IDE) を使用した TypeScript プログラミング

JavaScript で人気の IDE は次の 2 つです。

Visual Studio Code (無料)
WebStorm (有料)

このセクションの記述は Visual Studio Code に関するものですが、他の IDE にも適用される場合があります。

重要なのは、Visual Studio Code が TypeScript ソースコードを 2 つの独立した方法で処理することです。

開いているファイルのエラーチェック：これは、いわゆる 言語サーバー を介して行われます。言語サーバーは特定のエディタとは独立して存在し、Visual Studio Code に言語関連のサービス（エラー検出、リファクタリング、オートコンプリートなど）を提供します。サーバーとの通信は、JSON-RPC ベースのプロトコルで行われます（RPC は Remote Procedure Calls の略です）。このプロトコルによって提供される独立性により、サーバーはほぼあらゆるプログラミング言語で記述できます。
- 重要な点：言語サーバーは、現在開いているファイルのエラーのみを一覧表示し、TypeScript をコンパイルしません。静的に分析するだけです。
ビルド（TypeScript ファイルを JavaScript ファイルにコンパイル）：ここでは、2 つの選択肢があります。
- 外部コマンドラインを介してビルドツールを実行できます。たとえば、TypeScript コンパイラ tsc には、入力ファイルを監視し、変更されるたびにそれらを出力ファイルにコンパイルする --watch モードがあります。その結果、IDE で TypeScript ファイルを保存するたびに、対応する出力ファイルがすぐに生成されます。
- Visual Studio Code 内から tsc を実行できます。そのためには、現在作業中のプロジェクト内、またはグローバルに（Node.js パッケージマネージャー npm を介して）インストールする必要があります。
ビルドによって、エラーの完全なリストを取得できます。Visual Studio Code 内からの TypeScript のコンパイルの詳細については、その IDE の公式ドキュメントを参照してください。

4.3章 TypeScript コンパイラによって生成されるその他のファイル

TypeScript ファイル main.ts が与えられると、TypeScript コンパイラはいくつかの種類の成果物を生成できます。最も一般的なものは次のとおりです。

JavaScript ファイル：main.js
宣言ファイル：main.d.ts（型情報が含まれています。JavaScript コードを除いた .ts ファイルと考えてください）
ソースマップファイル：main.js.map

TypeScript は、.ts ファイルではなく、.js ファイルと .d.ts ファイルで提供されることがよくあります。

JavaScript コードには実際の機能が含まれており、プレーンな JavaScript を介して利用できます。
宣言ファイルは、プログラミングエディタのオートコンプリートなどのサービスを支援します。この情報は、プレーンな JavaScript を TypeScript を介して利用できるようにします。ただし、プレーンな JavaScript で作業する場合でも、オートコンプリートの向上など、利点があります。

ソースマップは、main.js の出力コードの各部分について、それを生成した main.ts の入力コードのどの部分を示します。この情報は、とりわけ、ランタイム環境が JavaScript コードを実行しながら、エラーメッセージに TypeScript コードの行番号を表示できるようにします。

4.3.1章 TypeScript から npm パッケージを使用するには、型情報が必要です

npm レジストリは、巨大な JavaScript コードのリポジトリです。TypeScript から JavaScript パッケージを使用するには、その型情報が必要です。

パッケージ自体に .d.ts ファイル、または完全な TypeScript コードが含まれている場合があります。
含まれていない場合でも使用できる可能性があります。DefinitelyTyped は、人々がプレーンな JavaScript パッケージのために作成した宣言ファイルのリポジトリです。

DefinitelyTyped の宣言ファイルは、@types 名前空間内にあります。したがって、lodash などのパッケージの宣言ファイルが必要な場合は、@types/lodash パッケージをインストールする必要があります。

4.4章プレーンな JavaScript ファイルに対する TypeScript コンパイラの使用

TypeScript コンパイラは、プレーンな JavaScript ファイルも処理できます。

--allowJs オプションを使用すると、TypeScript コンパイラは入力ディレクトリの JavaScript ファイルを出力ディレクトリにコピーします。利点：JavaScript から TypeScript への移行を行う場合、JavaScript ファイルと TypeScript ファイルを混在させて開始し、徐々に JavaScript ファイルを TypeScript に変換できます。
--checkJs オプションを使用すると、コンパイラはさらに JavaScript ファイルの型チェックを行います（このオプションを機能させるには、--allowJs を有効にする必要があります）。利用可能な限られた情報に基づいて、できる限り型チェックを行います。どのファイルがチェックされるかは、ファイル内のコメントで設定できます。
- 明示的な除外：JavaScript ファイルにコメント // @ts-nocheck が含まれている場合、型チェックされません。
- 明示的な包含：--checkJs がない場合、コメント // @ts-check を使用して、個々の JavaScript ファイルの型チェックを行うことができます。
TypeScript コンパイラは、JSDoc コメントで指定された静的な型情報を使用します（例については後述）。徹底的に行えば、プレーンな JavaScript ファイルを完全に静的に型付けし、そこから宣言ファイルを取得することもできます。
--noEmit オプションを使用すると、コンパイラは出力を作成せず、ファイルの型チェックのみを行います。

これは、関数 add() の静的な型情報を提供する JSDoc コメントの例です。

/**
 * @param {number} x - The first operand
 * @param {number} y - The second operand
 * @returns {number} The sum of both operands
 */
function add(x, y) {
  return x + y;
}

詳細情報：TypeScript ハンドブックのJavaScript ファイルの型チェック。