React TypeScript 类型守卫教程

类型守卫在 TypeScript 中是一种强大的功能，它可以帮助我们更安全地进行类型检查。本教程将介绍如何在使用 React 和 TypeScript 时应用类型守卫。

基础概念

类型守卫是一种特殊的类型谓词，它允许我们在代码中缩小类型范围。以下是一些常用的类型守卫：

• typeof 守卫
• instanceof 守卫
• 自定义类型守卫

使用 typeof 守卫

我们可以使用 typeof 来检查变量是否属于某个类型。

function isString(value: any): value is string {
  return typeof value === 'string';
}

const input = 'Hello TypeScript!';

if (isString(input)) {
  console.log(input.toUpperCase()); // 输出: HELLO TYPESCRIP
}

使用 instanceof 守卫

instanceof 可以用来检查一个对象是否是某个类的实例。

interface Animal {
  name: string;
}

class Dog implements Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

function isDog(animal: Animal): animal is Dog {
  return animal instanceof Dog;
}

const dog = new Dog('Buddy');

if (isDog(dog)) {
  console.log(dog.name); // 输出: Buddy
}

自定义类型守卫

我们还可以自定义类型守卫。

function isNumber(value: any): value is number {
  return typeof value === 'number' && !isNaN(value);
}

const input = 42;

if (isNumber(input)) {
  console.log(input.toFixed(2)); // 输出: 42.00
}

扩展阅读

如果你对 TypeScript 和 React 的结合感兴趣，可以阅读以下教程：

• React with TypeScript

React TypeScript