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' 運算子的輸出。

列印頁面
上一頁
下一頁
廣告