TypeScript 中如何使用 Type Guard-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 是一种强类型的 JavaScript 超集，它引入了静态类型检查，使得代码更加健壮和可维护。而 Type Guard 是 TypeScript 中一个非常重要的概念，它可以帮助我们在运行时判断变量的类型，从而避免一些类型错误的问题。本文将详细介绍 TypeScript 中如何使用 Type Guard。

什么是 Type Guard

Type Guard 是 TypeScript 中的一个概念，它是指一种在运行时检查变量类型的技术。在 TypeScript 中，我们可以使用类型断言（Type Assertion）来告诉编译器某个变量的类型，但是这种方式只在编译时有效。如果我们需要在运行时判断变量的类型，就需要使用 Type Guard。

Type Guard 可以帮助我们在运行时判断一个变量是否属于某个特定的类型。如果判断为真，我们就可以在代码中使用该变量，并且 TypeScript 也会将该变量的类型缩小到特定的类型。这样就可以避免一些类型错误的问题。

如何使用 Type Guard

TypeScript 中有多种方式可以使用 Type Guard，下面我们将介绍其中的几种常用方法。

typeof

typeof 是 JavaScript 中的一个操作符，它可以返回一个变量的类型。在 TypeScript 中，我们可以使用 typeof 来判断一个变量是否属于某个特定的类型。例如：

// javascriptcn.com 代码示例
function isString(value: any): value is string {
  return typeof value === 'string';
}

const str = 'hello';
if (isString(str)) {
  console.log(str.toUpperCase()); // OK
}

const num = 123;
if (isString(num)) {
  console.log(num.toUpperCase()); // Error: 类型“number”上不存在属性“toUpperCase”
}

在上面的例子中，我们定义了一个 isString 函数，它接受一个参数 value，并返回一个布尔值。在函数体中，我们使用 typeof 来判断 value 是否属于 string 类型。如果判断为真，函数就会返回 true，否则返回 false。

在使用 isString 函数时，我们可以通过判断返回值是否为 true 来确定变量的类型。如果判断为真，我们就可以在代码中使用该变量，并且 TypeScript 也会将该变量的类型缩小到 string 类型。否则，变量的类型仍然是 any。

instanceof

instanceof 是 JavaScript 中的一个操作符，它可以判断一个对象是否属于某个特定的类。在 TypeScript 中，我们可以使用 instanceof 来判断一个变量是否属于某个特定的类。例如：

// javascriptcn.com 代码示例
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

function isPerson(value: any): value is Person {
  return value instanceof Person;
}

const person = new Person('Tom', 18);
if (isPerson(person)) {
  console.log(person.name); // OK
}

const obj = { name: 'Jerry', age: 20 };
if (isPerson(obj)) {
  console.log(obj.name); // Error: 类型“{ name: string; age: number; }”的参数不能赋给类型“Person”的参数
}

在上面的例子中，我们定义了一个 Person 类，它有两个属性 name 和 age。然后我们定义了一个 isPerson 函数，它接受一个参数 value，并返回一个布尔值。在函数体中，我们使用 instanceof 来判断 value 是否属于 Person 类型。如果判断为真，函数就会返回 true，否则返回 false。

在使用 isPerson 函数时，我们可以通过判断返回值是否为 true 来确定变量的类型。如果判断为真，我们就可以在代码中使用该变量，并且 TypeScript 也会将该变量的类型缩小到 Person 类型。否则，变量的类型仍然是 any。

in

in 是 JavaScript 中的一个操作符，它可以判断一个对象是否包含某个特定的属性。在 TypeScript 中，我们可以使用 in 来判断一个变量是否包含某个特定的属性。例如：

// javascriptcn.com 代码示例
interface Person {
  name: string;
  age: number;
}

function isPerson(value: any): value is Person {
  return 'name' in value && 'age' in value;
}

const person = { name: 'Tom', age: 18 };
if (isPerson(person)) {
  console.log(person.name); // OK
}

const obj = { name: 'Jerry' };
if (isPerson(obj)) {
  console.log(obj.name); // Error: 类型“{ name: string; }”的参数不能赋给类型“Person”的参数
}

在上面的例子中，我们定义了一个 Person 接口，它有两个属性 name 和 age。然后我们定义了一个 isPerson 函数，它接受一个参数 value，并返回一个布尔值。在函数体中，我们使用 in 来判断 value 是否包含 name 和 age 两个属性。如果判断为真，函数就会返回 true，否则返回 false。

自定义 Type Guard

除了上面介绍的方法外，我们还可以自定义 Type Guard。自定义 Type Guard 是指定义一个函数，它可以在运行时判断一个变量是否属于某个特定的类型。

自定义 Type Guard 的函数需要满足以下条件：

函数名以 is 开头；
函数接受一个参数，并返回一个布尔值；
函数体中使用一些判断语句来判断变量的类型。

下面是一个自定义 Type Guard 的例子：

// javascriptcn.com 代码示例
interface Person {
  name: string;
  age: number;
}

function isPerson(value: any): value is Person {
  return typeof value.name === 'string' && typeof value.age === 'number';
}

const person = { name: 'Tom', age: 18 };
if (isPerson(person)) {
  console.log(person.name); // OK
}

const obj = { name: 'Jerry' };
if (isPerson(obj)) {
  console.log(obj.name); // Error: 类型“{ name: string; }”的参数不能赋给类型“Person”的参数
}

在上面的例子中，我们定义了一个 Person 接口，它有两个属性 name 和 age。然后我们定义了一个 isPerson 函数，它接受一个参数 value，并返回一个布尔值。在函数体中，我们使用 typeof 来判断 value.name 是否属于 string 类型，使用 typeof 来判断 value.age 是否属于 number 类型。如果判断为真，函数就会返回 true，否则返回 false。

总结

Type Guard 是 TypeScript 中一个非常重要的概念，它可以帮助我们在运行时判断变量的类型，从而避免一些类型错误的问题。本文介绍了 TypeScript 中使用 Type Guard 的几种常用方法，包括 typeof、instanceof、in 和自定义 Type Guard。希望本文对大家在学习和使用 TypeScript 中的 Type Guard 有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655b6275d2f5e1655d58895c