TypeScript タグ付きユニオンは OP です

TypeScript で複数のオブジェクト シェイプを処理するのに苦労し、よりタイプ セーフなソリューションを望んだことはありますか?

もしそうなら、あなたは一人ではありません。多くの開発者は、TypeScript でタグ付き共用体 (判別共用体とも呼ばれます) が提供する可能性を最大限に理解していません。この強力な機能により、コードの安全性、可読性、保守性が向上します。この記事では、タグ付き共用体について詳しく説明し、それが TypeScript のスキルを向上させる方法を探っていきます。

⁉️ タグ付きユニオンとは何ですか?

タグ付き共用体を使用すると、いくつかの可能な形状の 1 つを表す型を作成でき、それぞれが「タグ」または「識別子」と呼ばれる特徴的なプロパティを持ちます。これにより、TypeScript は条件チェックで型を絞り込み、考えられるすべてのケースをコードで明示的に処理できるようになります。

?なぜ気にする必要があるのでしょうか?

強化された型の安全性

タグ付き共用体は、考えられるすべてのケースが確実に処理されるようにすることで、コンパイル時にエラーを検出するのに役立ちます。これにより、実行時エラーが減少し、コードがより堅牢になります。

明確で保守可能なコード

各ケースの形状を明示的に定義することで、コードがより読みやすくなり、保守が容易になります。将来の開発者 (または将来のあなた) に感謝するでしょう!

網羅性チェック

TypeScript は、考えられるケースの処理を忘れた場合に警告を発し、コードがすべてのシナリオに対応していることを確認します。

?例ごとにタグ付けされたユニオン

さまざまな形状があり、その面積を計算したいシナリオを考えてみましょう。

// Define interfaces with a discriminant property 'kind'
interface Circle {
  kind: 'circle';
  radius: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

interface Triangle {
  kind: 'triangle';
  base: number;
  height: number;
}

// Create a union type of all shapes
type Shape = Circle | Rectangle | Triangle;

// Function to calculate the area based on shape kind
function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;

    case 'rectangle':
      return shape.width * shape.height;

    case 'triangle':
      return (shape.base * shape.height) / 2;

    default:
      // The 'never' type ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

ここで何が起こっているのでしょうか？

• Discriminant Property (kind): 各インターフェースには、リテラル型の kind プロパティが含まれています。このプロパティは、結合のタグとして機能します。
• Union Type (Shape): すべてのシェイプ インターフェイスを 1 つのタイプに結合します。
• 型の絞り込み: switch ステートメント内で、TypeScript は kind プロパティに基づいてどの形状を扱っているかを正確に認識します。
• 網羅性チェック: Never 型のデフォルトのケースでは、新しい形状が追加されても処理されない場合、TypeScript はコンパイル時エラーを生成します。

?️ 例: 状態管理

タグ付きユニオンは、非同期操作 (データのフェッチなど) のさまざまな状態を表すなど、状態管理のシナリオで非常に役立ちます。

interface LoadingState {
  status: 'loading';
}

interface SuccessState {
  status: 'success';
  data: string;
}

interface ErrorState {
  status: 'error';
  error: string;
}

type AppState = LoadingState | SuccessState | ErrorState;

function renderApp(state: AppState) {
  switch (state.status) {
    case 'loading':
      return 'Loading...';
    case 'success':
      return `Data: ${state.data}`;
    case 'error':
      return `Error: ${state.error}`;
    // default case can be omitted because typescript is making sure all cases are covered!
  }
}

?なぜこれが良いのでしょうか?

• 状態の明確な表現: 各インターフェイスはアプリケーションの個別の状態を表すため、理解と管理が容易になります。

• データ アクセスによるタイプ セーフティ: 状態が「成功」の場合、TypeScript は状態にデータ プロパティがあることを認識します。同様に、状態が「エラー」の場合、エラー プロパティが認識されます。これにより、特定の状態に存在しないプロパティに誤ってアクセスすることが防止されます。

• 網羅性チェック: 新しい状態 (ステータス: 'empty' の EmptyState など) を追加すると、TypeScript は、renderApp 関数でこの新しいケースを処理するように警告します。

• 保守性の向上: アプリケーションが成長するにつれて、さまざまな状態の管理がより容易になります。コードの一部を変更すると、他の場所で必要な更新が促され、バグが減少します。

?タグ付きユニオンの使用に関するヒント

一貫した識別子: すべてのタイプで同じプロパティ名 (タイプ、種類、ステータスなど) を使用します。
リテラル型: 型を正確に絞り込むために、識別子プロパティでリテラル型 ('email'、'sms' など) が使用されていることを確認します。
文字列列挙型を避ける: 型の絞り込みを簡単にするために、識別子の列挙型よりも文字列リテラル型を優先します。

?結論

タグ付きユニオンは、より安全で保守しやすいコードを作成するのに役立つ TypeScript の強力な機能です。考えられるそれぞれの型を明示的に処理することで、予期しないエラーが発生する可能性が減り、コードが理解しやすくなります。

現在または次の TypeScript プロジェクトでタグ付きユニオンを試して、そのメリットを直接体験してください!

?さらに読む

• TypeScript ハンドブック: 共用体と交差型
• TypeScript の差別化共用体とは何ですか?

以上がTypeScript タグ付きユニオンは OP ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。