这个 TypeScript 技巧将让你大开眼界

开发 前端
TypeScript 是一个强大的工具,可以确保代码的类型安全性。通过使用 ​​ExtractSurname​​ 类型,我们能够确保 ​​findName​​ 函数只接受有效的姓氏,从而避免拼写错误和潜在的运行时错误。

TypeScript 是一个了不起的工具,可以用来操纵现有数据并开发出优秀的实践方法。

今天我们将探索如何从字符串数组中正确提取全名,以确保输出的类型安全和干净。

问题

我们检查一下这段代码并理解它的问题:

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

这段代码使用了一个名字数组进行搜索。findName 函数接受一个姓氏字符串并返回相关的全名。问题在于当你输入 "Doee" 进 findName 函数时会出现。

这个不起眼的拼写错误会导致 undefined 输出,这可能会在后续导致错误,因为没有任何机制阻止我们犯这个错误。

这时 TypeScript 就派上用场了。

如果我们确保 findName 只接受字面的姓氏,即 Craciun, Doe, Pigeon,那么当我们输入 names 数组中不存在的输入(如 "Doee")时,编译器就会报警。

解决方案

我们已经确定,findName 的有效参数需要包含所有现有的姓氏。为了实现这一点,我们创建一个名为 ExtractSurname 的泛型类型。

ExtractSurname 的代码可能看起来很复杂,但我们将逐步解析它:

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

这里 ExtractSurname 接受一个泛型参数 T,该参数使用 extends 操作符指的是任何字面字符串。

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

接下来我们应用 TypeScript 的三元操作符,这类似于 JavaScript 的三元操作符,但我们比较的是类型而不是实际数据。

我们知道 names 数组的格式是 “<Name> <Surname>”,所以这里的 infer 关键字从 T 中提取子类型。

在ExtractSurname<"Daniel Craciun">中:

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

最后,如果输入满足我们的 “” 格式,则返回姓氏作为类型,否则返回 null

好了,我们的 ExtractSurname 类型已经准备好了。

现在我们需要一个 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 的 “<Name> <Surname>” 格式。

我们使用 as const 将 names 的类型缩小为字面字符串数组。这意味着我们将 names 的类型从 string 强制转换为:

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

参数 (typeof names)[number] 表示 names 中每个索引元素的类型:

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

最后,这是 Surname 的结果类型:

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

最后一步是更新我们之前定义的 findName 函数,用一个新的 findNameUsingSurname 函数,如下所示:

// 接受实际的 `Surname` 而不是一般的字符串。
const findNameUsingSurname = (surname: Surname) => {
  // 注意:我们需要后缀操作符 "!" 来断言 `find` 函数不会返回 undefined 值。
  return names.find((name) => name.includes(surname))!
}

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

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

这就是我们预期的 TypeScript 编译器的魔法:

结论

TypeScript 是一个强大的工具,可以确保代码的类型安全性。通过使用 ExtractSurname 类型,我们能够确保 findName 函数只接受有效的姓氏,从而避免拼写错误和潜在的运行时错误。这个技巧不仅提高了代码的安全性,还增强了开发效率。希望你能在项目中尝试这个技巧,并体验它带来的便利和强大功能。

责任编辑:姜华 来源: 大迁世界
相关推荐

2024-08-26 08:52:41

2021-04-03 13:12:43

微信技巧Bug

2018-02-25 08:48:50

百度职业代码

2021-01-10 08:16:25

微信移动应用实用技巧

2014-04-01 11:39:38

集装箱数据中心谷歌

2020-09-17 20:25:00

人工智能

2010-12-20 13:53:10

GoogleWebGL

2009-05-19 10:18:00

机房网络管理

2011-04-13 14:52:13

Qcon

2020-04-06 09:21:04

AI医疗汽车行业

2021-01-12 05:57:49

AI人工智能机器学习

2021-12-23 20:00:59

Firefox浏览器开源

2018-04-25 10:46:05

Linux命令行日历

2021-12-20 10:32:05

IT技术领导者CIO

2024-01-15 07:00:00

2021-12-28 11:06:22

Python 开发编程语言

2024-12-16 08:11:45

Python系统调用

2013-01-22 16:39:44

NFC移动支付

2015-05-12 10:34:45

2018-11-23 14:30:19

人工智能人脸识别刷手掌
点赞
收藏

51CTO技术栈公众号