サイトアイコンmaita tomoya dev io

#2 TypeScript開発のベストプラクティス2024

TypeScript開発のベストプラクティス2024

TypeScriptを効果的に活用するためのベストプラクティスをまとめました。

1. 厳格な型チェックを有効にする

tsconfig.jsonstrict: trueを設定することで、より安全なコードを書けます。

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

2. 型推論を活用する

TypeScriptの型推論を活用し、不要な型注釈は避けましょう。

// 不要な型注釈
const name: string = "John";

// 型推論を活用
const name = "John"; // string型として推論される

3. ユニオン型と型ガード

type Result<T> = { success: true; data: T } | { success: false; error: string };

function processResult<T>(result: Result<T>) {
  if (result.success) {
    // 型ガードによりdataプロパティが利用可能
    console.log(result.data);
  } else {
    console.error(result.error);
  }
}

4. Utilityタイプの活用

TypeScriptの組み込みUtilityタイプを活用しましょう。

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

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

// Pick: 特定のプロパティのみ選択
type UserPreview = Pick<User, 'id' | 'name'>;

// Omit: 特定のプロパティを除外
type UserWithoutId = Omit<User, 'id'>;

5. as constアサーション

リテラル型を保持したい場合はas constを使用します。

const colors = ['red', 'green', 'blue'] as const;
type Color = typeof colors[number]; // 'red' | 'green' | 'blue'

これらのベストプラクティスを実践することで、型安全性を保ちながら生産的な開発が可能になります。