TypeScript チュートリアル
TypeScript は JavaScript のスーパーセットであり、ECMAScript 6 標準をサポートしています（ES6 チュートリアル）。
TypeScript は、Microsoft によって開発されたフリーかつオープンソースのプログラミング言語であり、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!:
その他の拡張