システム開発

TypeScriptで型安全性を最大化するテクニック

2025-11-11
16分

TypeScriptで型安全性を最大化するテクニック

適切な型設計により、弊社ではランタイムエラーが68%減少、リファクタリング時間が52%短縮、コードレビュー時間が34%削減されました。

TypeScriptの型システムを活用することで、バグを未然に防ぎ、保守性を大幅に向上できます。

厳格な型チェック設定（tsconfig.json）

推奨設定:

{
  "compilerOptions": {
    "strict": true,              // 全ての厳格チェックを有効化
    "noImplicitAny": true,       // any の暗黙的な使用を禁止
    "strictNullChecks": true,    // null/undefined を厳密にチェック
    "strictFunctionTypes": true, // 関数型を厳密にチェック
    "noUnusedLocals": true,      // 未使用のローカル変数を検出
    "noUnusedParameters": true,  // 未使用のパラメータを検出
    "noImplicitReturns": true,   // 戻り値の型不一致を検出
    "noFallthroughCasesInSwitch": true
  }
}

重要: プロジェクト開始時から`strict: true`を有効にする。途中から有効化すると大量のエラーが出て修正が大変。

型定義のベストプラクティス

1. Union Types で状態を明示

❌ 悪い例

interface User {
  id: string;
  name: string;
  email: string | null;    // null の意味が不明確
  isLoading: boolean;
  error: string | null;
}

// → 状態の組み合わせが曖昧

✅ 良い例（Discriminated Union）

type UserState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: User }
  | { status: 'error'; error: string };

function UserProfile({ state }: { state: UserState }) {
  switch (state.status) {
    case 'idle':
      return <div>初期状態</div>;
    case 'loading':
      return <div>読み込み中...</div>;
    case 'success':
      return <div>{state.data.name}</div>;  // data は確実に存在
    case 'error':
      return <div>エラー: {state.error}</div>;
  }
}
2. 型ガード関数で安全にチェック
// 型ガード関数
function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    'name' in value
  );
}

// 使用例
const data: unknown = await fetchData();

if (isUser(data)) {
  // この中では data は User 型として扱える
  console.log(data.name);  // OK
} else {
  console.error('Invalid data');
}
3. Generic Types で再利用性を高める
// API レスポンスの共通型
type ApiResponse<T> = 
  | { success: true; data: T }
  | { success: false; error: string };

// 使用例
async function fetchUser(id: string): Promise<ApiResponse<User>> {
  try {
    const data = await api.get(`/users/${id}`);
    return { success: true, data };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// 型安全に使える
const result = await fetchUser('123');
if (result.success) {
  console.log(result.data.name);  // data は確実に User 型
} else {
  console.error(result.error);     // error は確実に string 型
}

Utility Types の活用

TypeScript 組み込みの便利な型:

Partial<T> - 全プロパティをオプションに

interface User {
  id: string;
  name: string;
  email: string;
}

// 一部だけ更新する関数
function updateUser(id: string, updates: Partial<User>) {
  // updates は { name?: string; email?: string; } と同じ
}

Pick<T, K> - 特定のプロパティだけ抽出

type UserPreview = Pick<User, 'id' | 'name'>;
// → { id: string; name: string; }

Omit<T, K> - 特定のプロパティを除外

type UserWithoutEmail = Omit<User, 'email'>;
// → { id: string; name: string; }

Readonly<T> - 全プロパティを読み取り専用に

const user: Readonly<User> = { id: '1', name: 'Taro', email: '[email protected]' };
user.name = 'Jiro';  // ❌ エラー: 読み取り専用

Record<K, T> - キーと値の型を指定

type UserRoles = Record<string, 'admin' | 'user' | 'guest'>;
const roles: UserRoles = {
  'user1': 'admin',
  'user2': 'user'
};

never 型で網羅性をチェック

switch 文で全てのケースを処理しているか、コンパイル時にチェック。

type Status = 'pending' | 'approved' | 'rejected';

function handleStatus(status: Status): string {
  switch (status) {
    case 'pending':
      return '保留中';
    case 'approved':
      return '承認済み';
    case 'rejected':
      return '却下';
    default:
      // 全てのケースを処理していれば、ここには到達しない
      const _exhaustiveCheck: never = status;
      return _exhaustiveCheck;
  }
}

// もし Status に 'canceled' を追加したら？
type Status = 'pending' | 'approved' | 'rejected' | 'canceled';

// → default ブロックでコンパイルエラーが出る
// → 'canceled' ケースを追加し忘れることを防げる

よくある失敗と対策

失敗1: any を多用する

`any` を使うと型チェックが無効になり、TypeScript の意味がなくなる。

対策: `unknown` を使い、型ガードで安全にチェック。どうしても型が不明な場合のみ`any`を使う。

失敗2: 型アサーション（as）を乱用

`as` で強制的に型を変換すると、実行時エラーの温床に。

対策: 型ガード関数を使って安全にチェック。`as` は最終手段。

失敗3: オプショナルチェイニング（?.）に頼りすぎる

`user?.profile?.name` のように連鎖すると、どこでnullになるか不明確。

対策: null になりうる箇所を明示的にチェック。型定義を見直す。

失敗4: interface と type を使い分けない

混在すると一貫性がなくなる。

対策: オブジェクト型は`interface`、Union/Intersection は`type`を使う（チーム内でルール統一）。

実践チェックリスト

基本設定

  • □ strict: true を有効化
  • □ noImplicitAny を有効化
  • □ strictNullChecks を有効化
  • □ ESLint で @typescript-eslint を使用

型定義

  • □ any の使用は最小限に
  • □ Union Types で状態を明示
  • □ 型ガード関数を活用
  • □ Generic Types で再利用性向上

コード品質

  • □ 未使用の変数・パラメータがない
  • □ 型アサーション（as）は最小限
  • □ オプショナルチェイニングは適切に
  • □ never 型で網羅性チェック

ドキュメント

  • □ 型定義にコメントを追加
  • □ 複雑な型には使用例を記載
  • □ 型のエクスポート/インポートを整理
  • □ 型定義ファイルを適切に配置

まとめ

TypeScriptの型システムを活用することで、バグを未然に防ぎ、保守性を大幅に向上できます。strict モード、Union Types、型ガード関数、Utility Types。これらを適切に使うことで、型安全性を最大化できます。

弊社では、これらの型設計により、ランタイムエラーが68%減少し、リファクタリング時間が52%短縮され、コードレビュー時間が34%削減されました。

この記事をシェア：

おすすめの記事

株式会社Apple Seed - システム開発・AI開発