TypeScript 是一個(gè)了不起的工具，可以用來(lái)操縱現(xiàn)有數(shù)據(jù)并開發(fā)出優(yōu)秀的實(shí)踐方法。

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

問題

我們檢查一下這段代碼并理解它的問題：

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

這段代碼使用了一個(gè)名字?jǐn)?shù)組進(jìn)行搜索。findName 函數(shù)接受一個(gè)姓氏字符串并返回相關(guān)的全名。問題在于當(dāng)你輸入 "Doee" 進(jìn) findName 函數(shù)時(shí)會(huì)出現(xiàn)。

這個(gè)不起眼的拼寫錯(cuò)誤會(huì)導(dǎo)致 undefined 輸出，這可能會(huì)在后續(xù)導(dǎo)致錯(cuò)誤，因?yàn)闆]有任何機(jī)制阻止我們犯這個(gè)錯(cuò)誤。

這時(shí) TypeScript 就派上用場(chǎng)了。

如果我們確保 findName 只接受字面的姓氏，即 Craciun, Doe, Pigeon，那么當(dāng)我們輸入 names 數(shù)組中不存在的輸入（如 "Doee"）時(shí)，編譯器就會(huì)報(bào)警。

解決方案

我們已經(jīng)確定，findName 的有效參數(shù)需要包含所有現(xiàn)有的姓氏。為了實(shí)現(xiàn)這一點(diǎn)，我們創(chuàng)建一個(gè)名為 ExtractSurname 的泛型類型。

ExtractSurname 的代碼可能看起來(lái)很復(fù)雜，但我們將逐步解析它：

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

這里 ExtractSurname 接受一個(gè)泛型參數(shù) T，該參數(shù)使用 extends 操作符指的是任何字面字符串。

在 ExtractSurname<"Daniel"> 中，T 的值等于 "Daniel"。

接下來(lái)我們應(yīng)用 TypeScript 的三元操作符，這類似于 JavaScript 的三元操作符，但我們比較的是類型而不是實(shí)際數(shù)據(jù)。

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

在ExtractSurname<"Daniel Craciun">中：

infer Firstname = "Daniel"
infer Surname = "Craciun"

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

好了，我們的 ExtractSurname 類型已經(jīng)準(zhǔn)備好了。

現(xiàn)在我們需要一個(gè) Surname 類型來(lái)表示 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 的 “<Name> <Surname>” 格式。

我們使用 as const 將 names 的類型縮小為字面字符串?dāng)?shù)組。這意味著我們將 names 的類型從 string 強(qiáng)制轉(zhuǎn)換為：

readonly ["Daniel Craciun", "John Doe", "Harry Pigeon"]

參數(shù) (typeof names)[number] 表示 names 中每個(gè)索引元素的類型：

"Daniel Craciun" | "John Doe" | "Harry Pigeon"

最后，這是 Surname 的結(jié)果類型：

type of Surname: "Craciun" | "Doe" | "Pigeon"

最后一步是更新我們之前定義的 findName 函數(shù)，用一個(gè)新的 findNameUsingSurname 函數(shù)，如下所示:

// 接受實(shí)際的 `Surname` 而不是一般的字符串。
const findNameUsingSurname = (surname: Surname) => {
  // 注意：我們需要后綴操作符 "!" 來(lái)斷言 `find` 函數(shù)不會(huì)返回 undefined 值。
  return names.find((name) => name.includes(surname))!
}

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

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

這就是我們預(yù)期的 TypeScript 編譯器的魔法：

結(jié)論

TypeScript 是一個(gè)強(qiáng)大的工具，可以確保代碼的類型安全性。通過使用 ExtractSurname 類型，我們能夠確保 findName 函數(shù)只接受有效的姓氏，從而避免拼寫錯(cuò)誤和潛在的運(yùn)行時(shí)錯(cuò)誤。這個(gè)技巧不僅提高了代碼的安全性，還增強(qiáng)了開發(fā)效率。希望你能在項(xiàng)目中嘗試這個(gè)技巧，并體驗(yàn)它帶來(lái)的便利和強(qiáng)大功能。