TypeScript チュートリアル
TypeScript は JavaScript のスーパーセットであり、ECMAScript 6 標準をサポートしています（ES6 チュートリアル）。
TypeScript はマイクロソフトが開発した自由でオープンソースのプログラミング言語であり、JavaScript を基に静的型チェックを追加したスーパーセットです。
TypeScript の設計目標は大規模アプリケーションの開発であり、純粋な JavaScript にコンパイルでき、コンパイルされた JavaScript は任意のブラウザで実行できます。
なぜ TypeScript を選ぶのか
TypeScript は Microsoft が開発したオープンソースのプログラミング言語であり、JavaScript のスーパーセットです。
TypeScript は、オプションの静的型、インターフェース、列挙型などの機能を追加することで、JavaScript の開発体験を大幅に向上させます。
TypeScript の主な利点
- 静的型チェック：コンパイル時に型エラーを検出し、実行時エラーを減らします
- 強力な IDE サポート：スマートなコード補完、ナビゲーション、リファクタリング
- より良いコードの可読性：型そのものが最高のドキュメントです
- 最新の JavaScript 機能：アロー関数、モジュール、クラスなど、ES6+ の構文をサポート
- 段階的な移行：既存の JavaScript プロジェクトを段階的に TypeScript に移行できます
TypeScript の動作原理
TypeScript はブラウザで直接実行できず、まず JavaScript にコンパイルする必要があります。このコンパイルプロセスでは型エラーをチェックし、TypeScript 固有の構文を純粋な JavaScript に変換します。
SVG 図：TypeScript のコンパイルプロセスTypeScript コンパイラ (tsc) はコンパイルプロセス中に型チェックを実行し、型エラーが見つかった場合はエラーを報告してコンパイルを中止します。コンパイルが成功すると、純粋な JavaScript コードが生成され、任意のブラウザまたは Node.js 環境で実行できます。
言語の特徴
TypeScript は JavaScript に型機能を追加した拡張であり、既存の構文との互換性を維持した上で、より強力な型システムとエンジニアリング能力を導入しています。
コア拡張機能（TypeScript 独自）
| 機能 | 説明 |
|---|---|
| 型アノテーション & コンパイル時チェック | 開発段階で型エラーを発見し、コードの信頼性を向上させます |
| 型推論 | 型を明示的に宣言しなくても、コンパイラが自動的に推論できます |
| 型消去 | コンパイル後に型情報を削除し、純粋な JavaScript を出力します |
| インターフェース（Interface） | オブジェクトの構造を定義し、コードの制約を強化します |
| 列挙型（Enum） | 名前付き定数の集合を提供し、可読性を向上させます |
| ジェネリック（Generics） | 型の再利用をサポートし、関数とクラスの柔軟性を高めます |
| Mixin | 多重継承のコンポジションパターンを実装 |
| 名前空間（Namespace） | コード構造を整理します（旧方式であり、現在はモジュールがよく使われます） |
| タプル（Tuple） | 固定長で、異なる型を持つ配列 |
| 非同期（Await） | より直感的な非同期フロー制御を提供します |
ES2015 からの構文サポート（下位互換）
TypeScript は ECMAScript 2015 のコア機能をサポートし、下位互換のためのコンパイルも行います：
| 機能 | 説明 |
|---|---|
| クラス（Class） | オブジェクト指向プログラミングのサポート |
| モジュール（Module） | モジュール化開発（import/export）をサポート |
| アロー関数（=>） | より簡潔な関数の書き方で、字句スコープをバインドします |
| オプション引数 | 関数の引数を省略できます |
| デフォルト引数 | 引数にデフォルト値を提供します |
JavaScript と TypeScript の違い
TypeScript は JavaScript のスーパーセットであり、JavaScript の構文を拡張しているため、既存の JavaScript コードは変更なしで TypeScript と一緒に動作できます。TypeScript は型アノテーションにより、コンパイル時の静的型チェックを提供します。
TypeScript は既存の JavaScript コードを処理でき、その中の TypeScript コードのみをコンパイルします。
最初の TypeScript サンプル
次のサンプルでは、TypeScript を使用して出力します Hello World!:
その他の拡張