项目中邂逅的那些有趣 TS 类型

2023-09-27 13:57:45

TypeScript 中那些有趣且实用的类型

在 JavaScript 发展的进程中，TypeScript 应运而生，它作为 JavaScript 的超集出现在我们的视野中，宣告着编程新时代的到来。它弥补了 JavaScript 在类型检查方面的缺陷，赋予了我们静态类型语言的强大功能。在开发实践中，TypeScript 中那些有趣且实用的类型，让我们对编程语言的理解又提升了一个层次。

从未见过的 undefined

在 JavaScript 中，undefined 是一个常量，它表示着未定义的值。而在 TypeScript 中，undefined 被定义为一个类型，表示一个变量或属性尚未赋值。这意味着我们可以在类型注解中使用 undefined，来明确表明变量或属性可以为 undefined。

let name: string | undefined;

通过这种方式，TypeScript 帮助我们避免了对未定义值的意外访问，提高了代码的鲁棒性。

可选链的福音 nullish

nullish 运算符（??）是 TypeScript 中引入的一个非常有用的运算符。它类似于逻辑 OR 运算符（||），但有微妙的差别。当运算符的一侧为 null 或 undefined 时，nullish 运算符返回另一侧的值；否则，它返回运算符的左侧值。

const name = user?.name ?? "Guest";

有了 nullish 运算符，我们再也不用担心 undefined 和 null 的判断了，代码变得更加简洁和优雅。

泛型的力量

泛型是 TypeScript 中的一项强大功能，它允许我们创建可重用且类型安全的代码。泛型类型定义了一个占位符类型，可以在使用时用实际类型替换。

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

使用泛型，我们可以创建适用于各种类型的数据的函数，代码的复用性大大提高。

条件类型与映射类型

条件类型和映射类型是 TypeScript 中高级类型系统的强大工具。条件类型允许我们基于某个条件创建新的类型，而映射类型允许我们基于现有类型的每个属性创建新的类型。

type HasName<T> = T extends { name: unknown } ? true : false;

通过条件类型，我们可以根据对象的属性来判断其类型。而映射类型则可以帮助我们对对象的每个属性进行操作，实现更复杂的类型转换。

实例：构建一个类型安全的表单验证器

为了将 TypeScript 的类型系统付诸实践，我们以构建一个类型安全的表单验证器为例。

interface FormValues {
  name: string;
  email: string;
  password: string;
  confirmPassword: string;
}

const validateForm = (values: FormValues): boolean => {
  // 省略验证逻辑
};

通过定义 FormValues 接口，我们明确了表单值的类型。这确保了在使用 validateForm 函数时传递的对象具有正确的属性和类型。