從字符串?dāng)?shù)組中提取自定義類型

在 TypeScript 的世界里，自定義類型從字符串?dāng)?shù)組中顯現(xiàn)，就像隱藏的寶石。

TypeScript 是一個操縱現(xiàn)有數(shù)據(jù)和發(fā)展良好實踐的神奇工具。

今天，我們將探索如何以正確的方式從字符串?dāng)?shù)組中提取全名，以確保產(chǎn)生干凈的類型安全輸出。

那么，不多說了……讓我們直接開始吧。

問題

首先讓我們通過檢查這段代碼來理解其中的問題：

const names = ["Daniel Craciun", "John Doe", "Harry Pigeon"]

const findName = (surname: string) => {
  return names.find((name) => name.includes(surname))
}

// 我們可以傳入任何字符串，這是不理想的。

console.log(findName("Craciun")) // 輸出：Daniel Craciun
console.log(findName("Doee")) // 輸出：undefined

這段代碼使用一個名字數(shù)組來進行搜索。

函數(shù) findName 接受一個字符串 surname 并返回關(guān)聯(lián)的全名。

問題出現(xiàn)在當(dāng)你在 findName 函數(shù)中輸入 "Doee" 時。

這個不顯眼的拼寫錯誤導(dǎo)致輸出了 undefined，這可能會導(dǎo)致后續(xù)的錯誤，因為沒有任何東西阻止我們犯這種錯誤。

這就是 TypeScript 發(fā)揮作用的地方。

如果我們確保 findName 只接受字面上的姓氏，即 Craciun、Doe、Pigeon，那么當(dāng)我們輸入像 "Doee" 這樣在名字數(shù)組中不存在的輸入時，編譯器應(yīng)該會提出警告。

解決方案

我們已經(jīng)確定了 findName 的有效參數(shù)只能是所有現(xiàn)有的姓氏。

為了實現(xiàn)這一點，我們創(chuàng)建了一個名為 ExtractSurname 的泛型類型。

ExtractSurname 的代碼可能看起來有點復(fù)雜，但我們將一步步拆解它：

type ExtractSurname<T extends string> = T extends `${infer Firstname} ${infer Surname}` ? Surname : null

這里 ExtractSurname 接受一個泛型參數(shù) T，它引用任何字面字符串，使用 extends 操作符。在 ExtractSurname<“Daniel”> 中，T 的值將等于 "Daniel"。

接下來我們應(yīng)用 TypeScript 三元運算符，它類似于 JavaScript 三元運算符，但我們是在比較類型而不是實際數(shù)據(jù)。

我們知道我們的名字數(shù)組的格式是“<名> <姓>”，所以這里使用 infer 關(guān)鍵字從 T 中提取子類型。

在 ExtractSurname<“Daniel Craciun”> 中：

• infer Firstname = “Daniel”
• infer Surname = “Craciun”

最后，如果輸入滿足我們的“<名> <姓>”格式，返回 Surname 作為類型，否則返回 null。

好的，我們的 ExtractSurname 類型準(zhǔn)備好了。

現(xiàn)在我們需要一個 Surname 類型來表示 names 中所有的姓氏。

type ExtractSurname<T extends string> = T extends `${infer Firstname} ${infer Surname}` ? Surname : null

const names = ["Daniel Craciun", "John Doe", "Harry Pigeon"] as const
type Surname = ExtractSurname<(typeof names)[number]>

names 滿足 ExtractSurname 的格式 “*<名> <姓>*”。

我們使用 as const 將 names 的類型從字符串縮小到字面字符串?dāng)?shù)組。

這意味著我們轉(zhuǎn)換 names 的類型從 string 到：readonly [“Daniel Craciun”, “John Doe”, “Harry Pigeon”]。

參數(shù) (typeof names)[number] 代表 names 中每個索引元素的類型：“Daniel Craciun” | “John Doe” | “Harry Pigeon”

最終，這是 Surname 的結(jié)果類型：type Surname = “Craciun” | “Doe” | “Pigeon”

最后一步是用下面的新函數(shù) findNameUsingSurname 更新我們之前定義的 findName 函數(shù)：

// 接收一個實際的 `Surname` 而不是一般的字符串。
const findNameUsingSurname = (surname: Surname) => {
  // 注意：我們需要后綴運算符 "!" 來斷言 "find" 函數(shù)不返回未定義的值。
  return names.find((name) => name.includes(surname))!
}

// 唯一可接受的輸入："Craciun", "Doe", "Pigeon" = 最大類型安全
const fullName = findNameUsingSurname("Craciun")

// 輸出："Daniel Craciun"
console.log(fullName)

而這里是 TypeScript 編譯器如我們所期待的那樣施展它的魔法：