開発者が知っておくべき7つの高度なTypeScriptの概念

TypeScriptは現代のWeb開発において不可欠なツールとなっています。TypeScriptのスキルを向上させるための高度な概念を見ていきましょう！

1. ユニオン型：OR演算子の力

ユニオン型を使用すると、複数の型を型安全な方法で扱うことができます：

type Status = '下書き' | '公開済み' | 'アーカイブ済み';

function handlePost(status: Status) {
  switch (status) {
    case '下書き':
      return '📝 作業中';
    case '公開済み':
      return '🚀 公開中';
    case 'アーカイブ済み':
      return '📦 保管済み';
  }
}

2. インターセクション型：AND演算子の力

型を組み合わせる必要がある場合は、インターセクション型が便利です：

type User = {
  id: string;
  name: string;
};

type AdminPrivileges = {
  accessLevel: 'admin';
  manageUsers: boolean;
};

type AdminUser = User & AdminPrivileges;

3. 型ガード：実行時の型チェック

型ガードは、実行時にTypeScriptが型を理解するのに役立ちます：

function processValue(value: string | number) {
  if (typeof value === 'string') {
    // ここでvalueは文字列型として扱われる
    return value.toUpperCase();
  } else {
    // ここでvalueは数値型として扱われる
    return value.toFixed(2);
  }
}

4. 条件付き型：動的な型の作成

条件に基づいて変化する型を作成できます：

type IsArray<T> = T extends any[] ? '配列' : '配列ではない';

type StringResult = IsArray<string>;  // '配列ではない'
type ArrayResult = IsArray<string[]>; // '配列'

5. マップ型：既存の型の変換

既存の型を構造的に修正します：

type Optional<T> = {
  [K in keyof T]?: T[K];
};

interface User {
  name: string;
  age: number;
}

type OptionalUser = Optional<User>; // すべてのフィールドがオプショナルになる

6. テンプレートリテラル型：型レベルでの文字列操作

強力な文字列ベースの型を作成できます：

type Direction = '上' | '右' | '下' | '左';
type Margin = `margin-${Direction}`;

// Margin = 'margin-上' | 'margin-右' | 'margin-下' | 'margin-左'

7. 再帰型：自己参照構造

ツリーのようなデータ構造に最適です：

type TreeNode<T> = {
  value: T;
  children?: TreeNode<T>[];
};

const tree: TreeNode<string> = {
  value: 'ルート',
  children: [
    { value: '子要素1' },
    { value: '子要素2', children: [{ value: '孫要素' }] }
  ]
};

まとめ

これらのTypeScriptの概念を習得することで、より保守性が高く型安全なコードを書くことができます。コンパイラを満足させるだけでなく、より信頼性が高く、自己文書化されたコードを作成することが目標です。