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 のような条件型など、高度な型表現が可能だ。

より深く学ぶには関連書籍が役立つ。

関連用語