TypeScript 的可區(qū)分聯(lián)合是一個(gè)強(qiáng)大的功能，可以將模式匹配提升到一個(gè)新的水平。它們使我們能夠創(chuàng)建複雜的、類(lèi)型安全的條件邏輯，而不僅僅是簡(jiǎn)單的 switch 語(yǔ)句。我在最近的專(zhuān)案中廣泛使用了這種技術(shù)，它改變了我在 TypeScript 中處理控制流程的方式。

讓我們從基礎(chǔ)開(kāi)始?？蓞^(qū)分聯(lián)合是一種使用公共屬性來(lái)區(qū)分不同變異的類(lèi)型。這是一個(gè)簡(jiǎn)單的例子：

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

這裡的「種類(lèi)」屬性是我們的判別式。它允許 TypeScript 根據(jù)其值推斷我們正在處理的特定形狀。

現(xiàn)在，讓我們看看如何使用它進(jìn)行模式匹配：

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

這很簡(jiǎn)潔，但這只是個(gè)開(kāi)始。我們可以更進(jìn)一步。

受歧視工會(huì)最強(qiáng)大的方面之一是詳盡檢查。 TypeScript 可以確保我們?cè)谀Ｊ狡ヅ渲刑幚砹怂锌赡艿那闆r。讓我們?yōu)槲覀兊穆?lián)合添加一個(gè)新形狀：

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
  }
}

為了使其更加健壯，我們可以新增一個(gè)引發(fā)錯(cuò)誤的預(yù)設(shè)情況，確保我們永遠(yuǎn)不會(huì)意外忘記處理新情況：

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)
  }
}

現(xiàn)在，如果我們新增形狀而不更新 getArea 函數(shù)，TypeScript 會(huì)給我們一個(gè)編譯時(shí)錯(cuò)誤。

但是我們可以透過(guò)模式匹配走得更遠(yuǎn)。讓我們來(lái)看一個(gè)涉及嵌套模式的更複雜的範(fàn)例。

想像一下我們正在為交通燈建造一個(gè)簡(jiǎn)單的狀態(tài)機(jī)：

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' }
  }
}

在這裡，我們不僅匹配頂級(jí)狀態(tài)，而且當(dāng)我們處?kù)丁搁W爍」?fàn)顟B(tài)時(shí)也匹配嵌套屬性。

我們也可以使用守衛(wèi)為我們的模式匹配添加更複雜的條件：

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 語(yǔ)句。我們可以將它與 if-else 鏈一起使用，甚至可以與物件文字一起使用以實(shí)現(xiàn)更複雜的場(chǎng)景：

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]())

這種方法在實(shí)作訪客模式時(shí)特別有用。這是我們?nèi)绾问褂每蓞^(qū)分聯(lián)合來(lái)實(shí)作簡(jiǎn)單表達(dá)式求值器的範(fàn)例：

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

這種模式允許我們輕鬆地使用新類(lèi)型的表達(dá)式來(lái)擴(kuò)展我們的表達(dá)式系統(tǒng)，並且 TypeScript 將確保我們處理評(píng)估函數(shù)中的所有情況。

這種方法最強(qiáng)大的方面之一是它如何允許我們將大型、複雜的條件區(qū)塊重構(gòu)為更易於管理和擴(kuò)展的結(jié)構(gòu)。讓我們來(lái)看一個(gè)更複雜的例子：

想像一下我們正在建立一個(gè)系統(tǒng)來(lái)處理不同類(lèi)型的金融交易：

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

在此範(fàn)例中，我們使用 TypeScript 的映射類(lèi)型和條件類(lèi)型來(lái)建立類(lèi)型安全對(duì)象，其中每個(gè)鍵對(duì)應(yīng)於一種事務(wù)類(lèi)型，每個(gè)值都是處理該特定類(lèi)型事務(wù)的函數(shù)。這種方法使我們能夠輕鬆新增類(lèi)型的交易，而無(wú)需更改handleTransaction函數(shù)的核心邏輯。

這種模式的美妙之處在於它既是類(lèi)型安全的又是可擴(kuò)展的。如果我們新增一個(gè)新的交易類(lèi)型，TypeScript 會(huì)強(qiáng)制我們加入對(duì)應(yīng)的處理器函數(shù)。如果我們嘗試處理不存在的交易類(lèi)型，我們將收到編譯時(shí)錯(cuò)誤。

這種具有可區(qū)分聯(lián)合的模式匹配方法可以產(chǎn)生更具表現(xiàn)力、更安全和自記錄的 TypeScript 程式碼，尤其是在複雜的應(yīng)用程式中。它使我們能夠以可讀且可維護(hù)的方式處理複雜的邏輯。

隨著我們的應(yīng)用程式變得越來(lái)越複雜，這些技術(shù)變得越來(lái)越有價(jià)值。它們使我們能夠編寫(xiě)不僅正確而且易於理解和修改的程式碼。透過(guò)充分利用 TypeScript 的類(lèi)型系統(tǒng)，我們可以創(chuàng)建健壯、靈活的系統(tǒng)，並且使用起來(lái)很愉快。

請(qǐng)記住，我們的目標(biāo)不僅僅是編寫(xiě)有效的程式碼，而是編寫(xiě)能夠清楚表達(dá)其意圖並且能夠在需求變化時(shí)防止錯(cuò)誤的程式碼。與可區(qū)分聯(lián)合的模式匹配是實(shí)現(xiàn)此目標(biāo)的強(qiáng)大工具。

根據(jù)我的經(jīng)驗(yàn)，採(cǎi)用這些模式可以顯著提高程式碼品質(zhì)和開(kāi)發(fā)速度。需要一些時(shí)間來(lái)習(xí)慣用可區(qū)分的聯(lián)合和詳盡的模式匹配來(lái)思考，但一旦你這樣做了，你會(huì)發(fā)現(xiàn)它為以清晰、類(lèi)型安全的方式構(gòu)建代碼開(kāi)闢了新的可能性。

當(dāng)您繼續(xù)探索 TypeScript 時(shí)，我鼓勵(lì)您尋找機(jī)會(huì)在自己的程式碼中應(yīng)用這些模式。從小事做起，也許可以將複雜的 if-else 鏈重構(gòu)為可區(qū)分聯(lián)合。隨著您對(duì)這項(xiàng)技術(shù)越來(lái)越熟悉，您將開(kāi)始看到越來(lái)越多的地方可以應(yīng)用它來(lái)簡(jiǎn)化和澄清您的程式碼。

請(qǐng)記住，TypeScript 的真正力量不僅在於它捕捉錯(cuò)誤的能力，還在於它能夠引導(dǎo)我們獲得更好、更具表現(xiàn)力的程式碼結(jié)構(gòu)。透過(guò)採(cǎi)用可區(qū)分聯(lián)合和詳盡模式匹配等模式，我們可以創(chuàng)建不僅正確，而且易於閱讀和維護(hù)的程式碼。

---

我們的創(chuàng)作

一定要看看我們的創(chuàng)作：

投資者中心 | 智能生活 | 時(shí)代與迴響 | 令人費(fèi)解的謎團(tuán) | 印度教 | 精英開(kāi)發(fā) | JS學(xué)校

---

我們?cè)诿襟w上

科技無(wú)尾熊洞察 | 時(shí)代與迴響世界 | 投資人中央媒體 | 令人費(fèi)解的謎團(tuán) | | 令人費(fèi)解的謎團(tuán) | >科學(xué)與時(shí)代媒介 |

現(xiàn)代印度教

以上是掌握 TypeScript 的模式匹配：提高程式碼的功能和安全性的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！