TypeScript - 类型保护

在 TypeScript 中，类型保护用于确定变量的类型，通常在条件语句或函数块内。类型保护通常接受变量并返回布尔值或变量类型。类型保护允许你告诉 TypeScript 编译器在一个特定上下文中为变量推断给定的类型，保证参数的类型是你所说的类型。

类似于特性检测，类型保护通常用于缩小类型范围，使你能够识别值的适当原型、方法和属性。因此，处理该值对用户来说变得简单。

可以在 TypeScript 中创建用户定义的类型保护，但它也具有内置运算符，如 'typeof'、'in' 和 'instanceof' 运算符。

TypeScript 中的 'typeof' 类型保护

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

Number
String
Boolean
Object
BigInt
Symbol
Function
Undefined

语法

用户可以按照以下语法使用 'typeof' 类型保护运算符。

typeof variable_name

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

示例

在下面的示例中，我们将使用 TypeScript 中的 'typeof' 类型保护。我们声明了四个分别为 'number'、'string'、'boolean' 和 'object' 类型的变量。之后，我们使用 TypeScript 的 'typeof' 运算符来打印它们的变量类型。

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 代码：

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

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

TypeScript 中的 'in' 类型保护

'in' 类型保护确定对象是否包含特定属性，然后用于区分不同的类型。它通常返回一个布尔值，指示该属性是否存在于对象中。它因其收窄特性而被使用。

语法

用户可以按照以下语法使用 'in' 类型保护运算符。

property_name in object_name

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

示例

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

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 in obj1? => ' + ('name' in obj1))
console.log('Is id obj2? => ' + ('id' in obj2))
console.log('Is marks in obj3? => ' + ('marks' in obj3))
console.log('Is math in obj3.marks? => ' + ('math' in obj3.marks))

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

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 in obj1? => ' + ('name' in obj1));
console.log('Is id in obj2? => ' + ('id' in obj2));
console.log('Is marks in obj3? => ' + ('marks' in obj3));
console.log('Is math in obj3.marks? => ' + ('math' in obj3.marks));

输出

上面的代码将产生以下输出：

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

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

TypeScript 中的 'instanceof' 类型保护

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

语法

用户可以按照以下语法使用 'instanceof' 类型保护运算符。

object_name instanceof class_name

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

示例

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

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 代码：

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' 运算符的输出。

打印页面