TypeScript类型保护之一：自定义类型

2024-02-20 02:51:38

在 TypeScript 开发中，我们经常会遇到需要判断变量类型的场景。因为 TypeScript 是静态类型语言，在编译阶段就会进行类型检查，这有助于我们及早发现错误，提高代码质量。但是，有时候我们并不能完全确定一个变量的具体类型，或者需要根据不同的类型执行不同的逻辑。这时，我们就需要用到类型保护机制。

类型保护就像是代码中的“安全卫士”，它帮助我们检查变量的类型，确保代码只在类型安全的情况下执行。TypeScript 提供了多种类型保护机制，让我们可以灵活地处理各种类型判断场景。

typeof 运算符：简单直接的类型判断

typeof 运算符是我们最常用的类型判断工具之一，它可以返回一个表达式的类型，例如 "string"、"number"、"boolean"、"object"、"function"、"undefined" 和 "symbol"。

举个例子，假设我们有一个变量 value，它的类型可能是字符串或数字：

let value: string | number;

if (typeof value === "string") {
  // value 是字符串，可以安全地执行字符串相关的操作
  console.log(value.toUpperCase()); 
} else {
  // value 是数字，可以安全地执行数字相关的操作
  console.log(value + 10); 
}

通过 typeof 运算符，我们就可以区分 value 的类型，并执行相应的逻辑。

instanceof 运算符：面向对象的类型检查

instanceof 运算符用于检查一个对象是否是某个类的实例。这在面向对象编程中非常有用，可以帮助我们判断一个对象是否属于特定的类。

例如，我们有一个 Animal 类和它的子类 Dog：

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

class Dog extends Animal {
  breed: string;
  constructor(name: string, breed: string) {
    super(name);
    this.breed = breed;
  }
}

let animal: Animal = new Dog("旺财", "金毛");

if (animal instanceof Dog) {
  // animal 是 Dog 类的实例，可以安全地访问 Dog 类特有的属性
  console.log(animal.breed); 
}

通过 instanceof 运算符，我们确认了 animal 是 Dog 类的实例，从而可以安全地访问 Dog 类特有的属性 breed。

null 保护：防止空指针异常

在 JavaScript 中，访问一个空对象或未定义的变量会导致运行时错误。TypeScript 的 null 保护机制可以帮助我们避免这类错误。

我们可以使用 ! 运算符来告诉 TypeScript，我们确定一个变量不为空或未定义。例如：

let element: HTMLElement | null = document.getElementById("myElement");

if (element) {
  // element 不为空，可以安全地访问它的属性和方法
  element.innerHTML = "Hello, world!";
}

在这个例子中，如果 document.getElementById("myElement") 返回 null，那么 if (element) 条件就不会成立，从而避免了访问空对象的错误。

in 保护：检查属性是否存在

in 运算符可以用来检查一个属性是否存在于一个对象中。这在处理动态对象时非常有用，可以避免访问不存在的属性导致的错误。

例如，我们有一个对象 user，它可能包含 email 属性：

interface User {
  name: string;
  email?: string;
}

let user: User = { name: "John" };

if ("email" in user) {
  // user 对象包含 email 属性，可以安全地访问它
  console.log(user.email); 
}

通过 in 运算符，我们确认了 user 对象包含 email 属性，从而可以安全地访问它。

字面量保护：精确匹配类型

字面量保护允许我们使用一个确切的字面量值来检查一个变量的类型。这在处理枚举类型或有限的字符串类型时非常有用。

例如，我们有一个变量 status，它的类型可能是 "success"、"error" 或 "pending"：

type Status = "success" | "error" | "pending";

let status: Status = "success";

if (status === "success") {
  // status 的值是 "success"，可以执行相应的逻辑
  console.log("操作成功！");
} else if (status === "error") {
  // status 的值是 "error"，可以执行相应的逻辑
  console.log("操作失败！");
}

通过字面量保护，我们可以精确地匹配 status 的值，并执行相应的逻辑。

自定义类型保护函数：更灵活的类型判断

除了 TypeScript 内置的类型保护机制外，我们还可以自定义类型保护函数来实现更复杂的类型判断逻辑。

自定义类型保护函数需要返回一个类型谓词，类型谓词的格式是 parameterName is Type，其中 parameterName 是函数的参数名，Type 是要判断的类型。

例如，我们可以定义一个函数 isString 来判断一个变量是否是字符串类型：

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

let value: any = "Hello, world!";

if (isString(value)) {
  // value 是字符串，可以安全地执行字符串相关的操作
  console.log(value.toUpperCase()); 
}