TypeScript のパターンマッチングをマスターする: コードのパワーと安全性を強化する-jsチュートリアル-php.cn

Mastering TypeScript

TypeScript の判別共用体は、パターンマッチングを次のレベルに引き上げる強力な機能です。これらを使用すると、単純な switch ステートメントを超えた、複雑でタイプセーフな条件付きロジックを作成できます。私は最近のプロジェクトでこのテクニックを広範囲に使用しており、TypeScript での制御フローへのアプローチ方法が変わりました。

基本から始めましょう。識別共用体は、共通のプロパティを使用して異なるバリアントを区別するタイプです。簡単な例を次に示します:

type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'rectangle'; width: number; height: number }

ログイン後にコピー

ここでの「kind」プロパティは判別式です。これにより、TypeScript はその値に基づいて、どの特定の形状を扱っているかを推測できるようになります。

それでは、これをパターンマッチングにどのように使用できるかを見てみましょう:

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2
    case 'rectangle':
      return shape.width * shape.height
  }
}

ログイン後にコピー

これはすばらしいことですが、まだ始まりにすぎません。これをさらに進めることができます。

差別結合の最も強力な側面の 1 つは、網羅性チェックです。 TypeScript を使用すると、パターンマッチングで考えられるすべてのケースを確実に処理できます。新しいシェイプを結合に追加しましょう:

type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'rectangle'; width: number; height: number }
  | { kind: 'triangle'; base: number; height: number }

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2
    case 'rectangle':
      return shape.width * shape.height
    // TypeScript will now warn us that we're not handling the 'triangle' case
  }
}

ログイン後にコピー

これをさらに堅牢にするために、エラーをスローするデフォルトのケースを追加して、新しいケースの処理をうっかり忘れることがないようにすることができます。

function assertNever(x: never): never {
  throw new Error("Unexpected object: " + x);
}

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2
    case 'rectangle':
      return shape.width * shape.height
    case 'triangle':
      return 0.5 * shape.base * shape.height
    default:
      return assertNever(shape)
  }
}

ログイン後にコピー

ここで、getArea 関数を更新せずに新しい図形を追加すると、TypeScript によってコンパイル時エラーが発生します。

しかし、パターンマッチングではさらに前進することができます。ネストされたパターンを含むより複雑な例を見てみましょう。

信号機用の単純なステートマシンを構築していると想像してください。

type TrafficLightState =
  | { state: 'green' }
  | { state: 'yellow' }
  | { state: 'red' }
  | { state: 'flashing', color: 'yellow' | 'red' }

function getNextState(current: TrafficLightState): TrafficLightState {
  switch (current.state) {
    case 'green':
      return { state: 'yellow' }
    case 'yellow':
      return { state: 'red' }
    case 'red':
      return { state: 'green' }
    case 'flashing':
      return current.color === 'yellow'
        ? { state: 'red' }
        : { state: 'flashing', color: 'yellow' }
  }
}

ログイン後にコピー

ここでは、トップレベルの状態で一致するだけでなく、「点滅」状態にあるときにネストされたプロパティでも一致します。

ガードを使用して、パターンマッチングにさらに複雑な条件を追加することもできます。

type WeatherEvent =
  | { kind: 'temperature', celsius: number }
  | { kind: 'wind', speed: number }
  | { kind: 'precipitation', amount: number }

function describeWeather(event: WeatherEvent): string {
  switch (event.kind) {
    case 'temperature':
      if (event.celsius > 30) return "It's hot!"
      if (event.celsius < 0) return "It's freezing!"
      return "The temperature is moderate."
    case 'wind':
      if (event.speed > 100) return "There's a hurricane!"
      if (event.speed > 50) return "It's very windy."
      return "There's a gentle breeze."
    case 'precipitation':
      if (event.amount > 100) return "It's pouring!"
      if (event.amount > 0) return "It's raining."
      return "It's dry."
  }
}

ログイン後にコピー

このパターンマッチングのアプローチは switch ステートメントに限定されません。これを if-else チェーンで使用したり、より複雑なシナリオのオブジェクトリテラルでも使用したりできます。

type Action =
  | { type: 'INCREMENT' }
  | { type: 'DECREMENT' }
  | { type: 'RESET' }
  | { type: 'SET', payload: number }

const reducer = (state: number, action: Action): number => ({
  INCREMENT: () => state + 1,
  DECREMENT: () => state - 1,
  RESET: () => 0,
  SET: () => action.payload,
}[action.type]())

ログイン後にコピー

このアプローチは、訪問者パターンを実装する場合に特に役立ちます。以下に、識別共用体を使用して単純な式評価器を実装する方法の例を示します。

type Expr =
  | { kind: 'number'; value: number }
  | { kind: 'add'; left: Expr; right: Expr }
  | { kind: 'multiply'; left: Expr; right: Expr }

const evaluate = (expr: Expr): number => {
  switch (expr.kind) {
    case 'number':
      return expr.value
    case 'add':
      return evaluate(expr.left) + evaluate(expr.right)
    case 'multiply':
      return evaluate(expr.left) * evaluate(expr.right)
  }
}

const expr: Expr = {
  kind: 'add',
  left: { kind: 'number', value: 5 },
  right: {
    kind: 'multiply',
    left: { kind: 'number', value: 3 },
    right: { kind: 'number', value: 7 }
  }
}

console.log(evaluate(expr))  // Outputs: 26

ログイン後にコピー

このパターンにより、新しいタイプの式を使用して式システムを簡単に拡張でき、TypeScript により、評価関数ですべてのケースが確実に処理されます。

このアプローチの最も強力な側面の 1 つは、大規模で複雑な条件付きブロックを、より管理しやすく拡張可能な構造にリファクタリングできることです。より複雑な例を見てみましょう:

さまざまな種類の金融取引を処理するシステムを構築していると想像してください。

type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'rectangle'; width: number; height: number }

ログイン後にコピー

この例では、TypeScript のマップされた型と条件付き型を使用して、各キーがトランザクションの種類に対応し、各値がその特定の種類のトランザクションを処理する関数であるタイプセーフオブジェクトを作成しました。このアプローチにより、handleTransaction 関数のコアロジックを変更することなく、新しいタイプのトランザクションを簡単に追加できます。

このパターンの利点は、タイプセーフであり、拡張可能であることです。新しいタイプのトランザクションを追加すると、TypeScript によって対応するプロセッサ関数の追加が強制されます。存在しないトランザクションの種類を処理しようとすると、コンパイル時エラーが発生します。

識別共用体を使用したこのパターンマッチングアプローチは、特に複雑なアプリケーションにおいて、より表現力豊かで、より安全で、自己文書化された TypeScript コードを実現できます。これにより、複雑なロジックを読みやすく保守しやすい方法で処理できるようになります。

アプリケーションが複雑になるにつれて、これらの技術の価値はますます高まります。これらにより、正しいだけでなく、理解しやすく変更しやすいコードを書くことができます。 TypeScript の型システムを最大限に活用することで、楽しく作業できる堅牢で柔軟なシステムを作成できます。

目標は、機能するコードを書くことだけではなく、その意図を明確に表現し、要件の変化に応じてエラーに強いコードを書くことであることに注意してください。識別結合を使用したパターンマッチングは、この目標を達成するための強力なツールです。

私の経験では、これらのパターンを採用すると、コードの品質と開発速度が大幅に向上しました。識別共用体と徹底的なパターンマッチングの観点から考えることに慣れるまでには時間がかかりますが、一度慣れてしまえば、明確でタイプセーフな方法でコードを構造化するための新しい可能性が開かれることがわかります。

TypeScript の探索を続ける際には、これらのパターンを独自のコードに適用する機会を探すことをお勧めします。おそらく複雑な if-else チェーンを識別共用体にリファクタリングするなど、小規模から始めてください。このテクニックに慣れてくると、コードを簡素化し明確にするためにこのテクニックを適用できる場所がどんどん見えてくるようになります。

TypeScript の真の力は、エラーをキャッチする機能だけではなく、より優れた、より表現力豊かなコード構造に導く機能にあることを忘れないでください。識別共用体や徹底的なパターンマッチングなどのパターンを採用することで、正しいだけでなく、読みやすく保守しやすいコードを作成できます。