TypeScript
JavaScript に静的型付けを追加した言語で、大規模開発の安全性と生産性を向上させる
言語フロントエンド
TypeScript とは
TypeScript は、Microsoft が 2012 年に公開した JavaScript のスーパーセットで、静的型付けを追加する。コンパイル時に型エラーを検出し、大規模開発の安全性と生産性を向上させる。
JavaScript vs TypeScript
| 観点 | JavaScript | TypeScript |
|---|---|---|
| 型 | 動的型付け | 静的型付け |
| エラー検出 | 実行時 | コンパイル時 |
| IDE サポート | 限定的 | 強力 (補完、リファクタリング) |
| 学習コスト | 低い | やや高い |
型の基本
// プリミティブ型
const name: string = 'Alice';
const age: number = 30;
const active: boolean = true;
// オブジェクト型
type User = { name: string; age: number; email?: string };
// ユニオン型
type Status = 'active' | 'inactive' | 'suspended';
// ジェネリクス
function first<T>(items: T[]): T | undefined { return items[0]; }
型の推論
// TypeScript は型を推論する (明示的な型注釈は不要な場合が多い)
const items = [1, 2, 3]; // number[] と推論
const user = { name: 'Alice', age: 30 }; // { name: string; age: number } と推論
Discriminated Union
type Result<T> =
| { ok: true; value: T }
| { ok: false; error: string };
function handle(result: Result<number>) {
if (result.ok) {
console.log(result.value); // TypeScript が value の存在を保証
} else {
console.error(result.error);
}
}
SAM は esbuild で TypeScript を自動的にトランスパイル・バンドルする。
tsconfig.json
{
"compilerOptions": {
"strict": true,
"target": "ES2022",
"module": "Node16",
"moduleResolution": "Node16",
"noUncheckedIndexedAccess": true
}
}
strict: true は必須。型安全性を最大限に活用する。
TypeScript の型システムの強み
型ガードで if (result.ok) のように条件分岐すると型が自動的に絞り込まれる。switch 文で全ケースを処理しないとコンパイルエラーになる網羅性チェック、type Route = `/api/${string}` のようなテンプレートリテラル型、T extends string ? A : B のような条件型など、高度な型表現が可能だ。
より深く学ぶには関連書籍が役立つ。