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