TypeScript 中的可空型別

Muhammad Maisam Abbas 2023年1月30日 2022年5月18日
  1. TypeScript 中的可空型別
  2. 在 TypeScript 中使屬性可選
  3. TypeScript 中 Nullable 的聯合型別
TypeScript 中的可空型別

在最近的 TypeScript 版本中,nullundefined 不可讀。但是,較新的版本支援這一點。

本教程將討論 TypeScript 中可空型別的概念。

TypeScript 中的可空型別

使用者必須關閉型別檢查模式才能在 TypeScript 中使用 nullundefined 型別。使用 strictNullChecks 標誌來檢查屬性的型別。

如果 strictNullChecks 標誌開啟,將不允許使用者定義型別 nullundefined。預設情況下,該標誌是開啟的,使用者必須手動將其關閉。

程式碼:

interface Info {
 name: string,
 age: number,
 city: string,
}

const info: Info = {
 name: 'John',
 age: null,
 city: 'Washington'
}

由於開啟了型別檢查器標誌,因此不會有輸出。將引發一個錯誤,即'Type null is not assignable to type number'

如果使用者手動關閉型別檢查器標誌,程式碼將執行。

程式碼:

interface Info {
 name: string,
 age: number,
 city: string,
}

const info: Info = {
 name: 'John',
 age: null,
 city: 'Washington'
}

console.log(info)

輸出:

{
  "name": "John",
  "age": null,
  "city": "Washington"
}

現在上面的程式碼只在型別檢查標誌關閉時執行。

在 TypeScript 中使屬性可選

還有另一種消除 nullundefined 的方法。這是處理屬性的最優選方式。

TypeScript 允許將屬性設為可選,以便這些屬性只能在需要時使用。與其在每次沒有用時都宣告屬性 null,不如首選可選呈現。

程式碼:

interface Info {
 name: string,
 age?: number,
 city: string,
}

const info1: Info = {name: 'John', city: 'Washington'};
const info2: Info = {name: 'Jack', age: 13, city: 'London'};

console.log(info1);
console.log(info2);

輸出:

{
  "name": "John",
  "city": "Washington"
}
{
  "name": "Jack",
  "age": 13,
  "city": "London"
}

請注意,在上面的示例中,屬性 age 是可選的。第一個物件 info1 中不需要屬性 age,因此它從未被呼叫。

如果型別檢查器關閉並且使用者將 info1 中的年齡設定為 null,它將引發錯誤。現在,假設有 100 個物件,其中只有 10 個需要 age 屬性,因此不要將 age 宣告為 null,而是將其設為可選。

TypeScript 中 Nullable 的聯合型別

當使用者不想關閉型別檢查器時使用聯合型別。聯合型別也是首選方法,但它具有在使用屬性時分配 null 的複雜性。

程式碼:

interface Info {
 name: string,
 age: number | null,
 city: string,
}

const info1: Info = {name: 'John', age: null, city: 'Washington'};
const info2: Info = {name: 'Jack', age: 13, city: 'London'};

console.log(info1);
console.log(info2);

輸出:

{
  "name": "John",
  "age": null,
  "city": "Washington"
}
{
  "name": "Jack",
  "age": 13,
  "city": "London"
}

注意介面中 age 的宣告。聯合型別用於為屬性分配多種型別,即使在嚴格模式下也能正常工作。

Muhammad Maisam Abbas avatar Muhammad Maisam Abbas avatar

Maisam is a highly skilled and motivated Data Scientist. He has over 4 years of experience with Python programming language. He loves solving complex problems and sharing his results on the internet.

LinkedIn