实用主义的 TypeScript 技巧

TypeScript 作为一种静态类型检查的语言，不仅提高了代码的安全性，还大大增强了开发者的编程体验。本文将通过一些实用技巧和实例，帮助你更好地掌握和应用 TypeScript。

1. 使用 never 类型检查 switch case 语句

在 switch case 语句中，never 类型可以帮助我们确保所有可能的情况都被处理，避免漏掉某些情况。

type Fruit = 'apple' | 'banana' | 'orange';

function getFruitColor(fruit: Fruit): string {
  switch (fruit) {
    case 'apple':
      return 'red';
    case 'banana':
      return 'yellow';
    case 'orange':
      return 'orange';
    default:
      const exhaustiveCheck: never = fruit;
      return exhaustiveCheck;
  }
}

在上面的例子中，如果我们在 Fruit 类型中添加了新的水果类型，但没有在 switch 语句中处理这个新类型，TypeScript 将会在 default 分支的 exhaustiveCheck 处报错，从而提醒我们处理新情况。

2. 使用互斥类型替代联合类型

在处理联合类型时，使用互斥类型可以让类型系统更清晰，避免意外情况。

type Square = { kind: 'square'; size: number };
type Rectangle = { kind: 'rectangle'; width: number; height: number };
type Shape = Square | Rectangle;

function getShapeArea(shape: Shape): number {
  if (shape.kind === 'square') {
    return shape.size * shape.size;
  } else if (shape.kind === 'rectangle') {
    return shape.width * shape.height;
  } else {
    const exhaustiveCheck: never = shape;
    return exhaustiveCheck;
  }
}

通过使用互斥类型，我们可以确保每个类型都有唯一的 kind 属性，这样在类型检查时更容易处理。

3. 保留联合类型的提示

有时候，我们希望在编写代码时保留联合类型的提示，这样在开发过程中可以更方便地知道哪些类型是可能的。

type Status = 'success' | 'error' | 'loading';

function handleStatus(status: Status) {
  switch (status) {
    case 'success':
      console.log('Operation was successful');
      break;
    case 'error':
      console.log('There was an error');
      break;
    case 'loading':
      console.log('Loading...');
      break;
    default:
      const exhaustiveCheck: never = status;
      return exhaustiveCheck;
  }
}

在这里，通过 switch case 语句，我们可以保留对 Status 类型所有可能值的提示，方便在开发过程中进行处理。

4. satisfies 关键字

TypeScript 4.9 引入了 satisfies 关键字，可以帮助我们更好地进行类型检查，确保对象满足某种类型但不限制其具体的形状。

type Point = { x: number; y: number };

const point = {
  x: 5,
  y: 10,
  z: 20
} satisfies Point;

在上面的例子中，point 对象不仅满足 Point 类型的要求，还可以有其他属性。使用 satisfies 关键字，我们可以确保对象符合预期类型，同时保留其他可能的属性。

5. 模板字符串类型的排列组合

模板字符串类型允许我们在类型层面上进行字符串拼接和组合，极大地增强了类型系统的灵活性。

type Color = 'red' | 'green' | 'blue';
type Size = 'small' | 'medium' | 'large';

type ColorSize = `${Color}-${Size}`;

const colorSize: ColorSize = 'red-small'; // 合法

在这里，ColorSize 类型表示所有可能的颜色和大小的组合，极大地增强了类型系统的表达能力。

6. 提取类型

有时候，我们需要从某个复杂类型中提取出某个部分的类型，TypeScript 提供了工具类型来帮助我们实现这一点。

type Person = {
  name: string;
  age: number;
  address: {
    street: string;
    city: string;
  };
};

type Address = Person['address'];

const address: Address = {
  street: '123 Main St',
  city: 'New York'
};

通过使用 Person['address']，我们可以轻松提取出 Person 类型中的 address 部分类型，方便在代码中复用。

结语

本文介绍了几个实用的 TypeScript 技巧，包括使用 never 类型检查 switch case 语句、使用互斥类型替代联合类型、保留联合类型的提示、satisfies 关键字、模板字符串类型的排列组合以及提取类型。这些技巧不仅能提高代码的类型安全性，还能增强开发者的编程体验。希望这些技巧能对你的 TypeScript 开发有所帮助。

本文由 mdnice 多平台发布