TypeScript 中的类型守卫是什么？

在 TypeScript 中，类型守卫用于确定变量的类型，通常在条件语句或函数块内部。类型守卫通常接收变量并返回布尔值或变量类型。类型守卫允许您告诉 TypeScript 编译器在特定上下文中推断变量的给定类型，从而保证参数的类型与您声明的一致。

与特性检测类似，类型守卫常用于限制类型，并允许您识别值的正确原型、方法和属性。因此，处理该值对于用户来说变得简单。

用户可以自定义创建类型守卫，但 TypeScript 也内置了一些运算符，如 'typeof'、'in' 和 'instanceof' 运算符。

在本教程中，我们将讨论这些运算符作为类型守卫的用法。

TypeScript 中的 ‘typeof’ 类型守卫

在 TypeScript 中，'typeof' 运算符用于获取变量的类型。根据变量的类型，它返回以下值：-

  • 数字

  • 字符串

  • 布尔值

  • 对象

  • 大整数

  • 符号

  • 函数

  • 未定义

语法

用户可以遵循以下语法来使用 'typeof' 类型守卫运算符。

typeof variable_name

在上述语法中，我们在变量名前使用 typeof 运算符来获取变量类型。

示例

在以下示例中，我们将使用 TypeScript 中的 'typeof' 类型守卫。我们声明了四个变量，类型分别为 'number'、'string'、'boolean' 和 'object'。之后，我们使用 TypeScript 的 'typeof' 运算符输出它们的变量类型。

Open Compiler
let my_number: number = 123
let my_string: string = 'Tutorialspoint'
let my_boolean: boolean = true
let my_object: { id: number } = { id: 1 }

console.log('type of my_number variable is: ' + typeof my_number)
console.log('type of my_string variable is: ' + typeof my_string)
console.log('type of my_boolean variable is: ' + typeof my_boolean)
console.log('type of my_object variable is: ' + typeof my_object)

编译后，它将生成以下 JavaScript 代码：-

Open Compiler
var my_number = 123;
var my_string = 'Tutorialspoint';
var my_boolean = true;
var my_object = { id: 1 };
console.log('type of my_number variable is: ' + typeof my_number);
console.log('type of my_string variable is: ' + typeof my_string);
console.log('type of my_boolean variable is: ' + typeof my_boolean);
console.log('type of my_object variable is: ' + typeof my_object);

输出

上述代码将产生以下输出：-

type of my_number variable is: number
type of my_string variable is: string
type of my_boolean variable is: boolean
type of my_object variable is: object

在上述输出中，用户可以看到 'typeof' 运算符对四个变量（'number'、'string'、'boolean' 和 'object'）的输出。

TypeScript 中的 ‘in’ 类型守卫

‘in’ 类型守卫用于确定对象是否包含特定属性，然后用于区分不同的类型。它通常返回一个布尔值，指示该属性是否存在于对象中。它被用于其缩小特性。

语法

用户可以遵循以下语法来使用 'in' 类型守卫运算符。

property_name in object_name

在上述语法中，我们使用 'in' 运算符来查找属性是否存在于对象中。

示例

在以下示例中，我们将使用 TypeScript 中的 'in' 类型守卫。我们声明了三个包含不同属性的对象。我们使用 'in' 类型守卫来检查对象中是否存在所需的属性。我们甚至可以检查属性是否包含另一个属性或是否未使用它。在 'obj3' 中，我们检查对象的属性是否包含另一个属性。

Open Compiler
let obj1: { id: number; name: string } = { id: 1, name: 'Tutorialspoint' }
let obj2: { name: string; roll: number } = { name: 'XYZ', roll: 12 }
let obj3: { id: number; marks: { english: number; math: number } } = {
   id: 101,
   marks: {
      math: 90,
      english: 80,
   },
}

console.log('Is name is in obj1? => ' + ('name' in obj1))
console.log('Is id is in obj2? => ' + ('id' in obj2))
console.log('Is marks is in obj3? => ' + ('marks' in obj3))
console.log('Is math is in obj3.marks? => ' + ('math' in obj3.marks))

编译后，它将生成以下 JavaScript 代码：-

Open Compiler
var obj1 = { id: 1, name: 'Tutorialspoint' };
var obj2 = { name: 'XYZ', roll: 12 };
var obj3 = {
   id: 101,
   marks: {
      math: 90,
      english: 80
   }
};
console.log('Is name is in obj1? => ' + ('name' in obj1));
console.log('Is id is in obj2? => ' + ('id' in obj2));
console.log('Is marks is in obj3? => ' + ('marks' in obj3));
console.log('Is math is in obj3.marks? => ' + ('math' in obj3.marks));

输出

上述代码将产生以下输出：-

Is name is in obj1? => true
Is id is in obj2? => false
Is marks is in obj3? => true
Is math is in obj3.marks? => true

在上述输出中，用户可以看到 'in' 运算符在代码中不同情况下产生的输出。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

TypeScript 中的 ‘instanceof’ 类型守卫

‘instanceof’ 是一个内置的类型守卫，用于确定一个值是否为特定构造函数或类的实例。我们可以使用此类型守卫通过测试对象或值是否派生自某个类来确定实例类型的类型。

语法

用户可以遵循以下语法来使用 'instanceof' 类型守卫运算符。

object_name instanceof class_name

在上述语法中，我们使用 'instanceof' 运算符来查找对象是否为类的实例。

示例

在以下示例中，我们将使用 TypeScript 中的 'instanceof' 类型守卫。我们声明了一个 'Parent' 类和一个子类 'Child'。我们声明 'Child' 类的对象并使用 'instanceof' 运算符查找对象属于哪个类。

Open Compiler
class Parent {
   id: number
   constructor(id: number) {
      this.id = id
   }
}

class Child extends Parent {
   id: number
   name: string

   constructor(id: number, name: string) {
      super(id)
      this.name = name
   }
}

let child = new Child(101, 'ABC')

console.log('child instanceof Child => ' + (child instanceof Child))
console.log('child instanceof Parent => ' + (child instanceof Parent))

编译后，它将生成以下 JavaScript 代码：-

Open Compiler
var __extends = (this && this.__extends) || (function () {
   var extendStatics = function (d, b) {
      extendStatics = Object.setPrototypeOf ||
         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
         function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
      return extendStatics(d, b);
   };
   return function (d, b) {
      extendStatics(d, b);
      function __() { this.constructor = d; }
      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
})();
var Parent = /** @class */ (function () {
   function Parent(id) {
      this.id = id;
   }
   return Parent;
}());
var Child = /** @class */ (function (_super) {
   __extends(Child, _super);
   function Child(id, name) {
      var _this = _super.call(this, id) || this;
      _this.name = name;
      return _this;
   }
   return Child;
}(Parent));
var child = new Child(101, 'ABC');
console.log('child instanceof Child => ' + (child instanceof Child));
console.log('child instanceof Parent => ' + (child instanceof Parent));

输出

上述代码将产生以下输出：-

child instanceof Child => true
child instanceof Parent => true

在上述输出中，用户可以看到在使用不同类及其对象时 'instanceof' 运算符的输出。

更新于：2022-12-19

3K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告