TypeScript開発で役立つ実用的なTips

TypeScriptを使用した開発において、知っておくと便利なTipsとテクニックをまとめました。

1. Union型を活用した型安全性の向上

Union型を使用することで、複数の型を受け付ける柔軟な関数を型安全に作成できます。

type Status = 'loading' | 'success' | 'error'

function getStatusMessage(status: Status): string {
  switch (status) {
    case 'loading':
      return '読み込み中...'
    case 'success':
      return '完了しました'
    case 'error':
      return 'エラーが発生しました'
    default:
      // TypeScriptが全てのケースをチェック
      const _exhaustive: never = status
      return _exhaustive
  }
}

2. オプショナルチェーニングとNullish Coalescing

?.と??演算子を組み合わせることで、安全にオプショナルなプロパティにアクセスできます。

interface User {
  name: string
  profile?: {
    bio?: string
    avatar?: string
  }
}

function getUserBio(user: User): string {
  return user.profile?.bio ?? 'プロフィールが設定されていません'
}

3. Mapped Typesで型の変換

既存の型から新しい型を生成する際に、Mapped Typesが便利です。

type User = {
  id: number
  name: string
  email: string
}

// すべてのプロパティをオプショナルにする
type PartialUser = Partial<User>

// すべてのプロパティを読み取り専用にする
type ReadonlyUser = Readonly<User>

// 特定のプロパティのみを抽出
type UserContact = Pick<User, 'name' | 'email'>

4. Generic Constraintsで型を制限

ジェネリック型に制約を加えることで、より安全で使いやすいAPIを作成できます。

interface Identifiable {
  id: string | number
}

function updateEntity<T extends Identifiable>(
  entity: T,
  updates: Partial<T>
): T {
  return { ...entity, ...updates }
}

const user = { id: 1, name: 'John', email: 'john@example.com' }
const updatedUser = updateEntity(user, { name: 'Jane' })

5. 型ガードで実行時型チェック

実行時に型を安全にチェックするための型ガード関数を作成しましょう。

function isString(value: unknown): value is string {
  return typeof value === 'string'
}

function processValue(value: unknown) {
  if (isString(value)) {
    // この時点でvalueはstring型として扱われる
    console.log(value.toUpperCase())
  }
}

まとめ

これらのTipsを活用することで、より型安全で保守性の高いTypeScriptコードを書くことができます。TypeScriptの型システムを理解し、適切に活用することが重要です。