TypeScript Null & Undefined

TypeScript 有一个强大的系统来处理 nullundefined 值。

默认情况下 nullundefined 处理是禁用的,可以通过将 strictNullChecks 设置为 true 来启用。

此页面的其余部分适用于启用 strictNullChecks 的情况。


Types

nullundefined 是原始类型,可以像其他类型一样使用,例如 string

实例

let value: string | undefined | null = null;
value = 'hello';
value = undefined;
亲自试一试 »

启用 strictNullChecks 时,TypeScript 要求设置值,除非将 undefined 显式添加到类型 .


可选链接

Optional Chaining 是一个 JavaScript 特性,可以很好地与 TypeScript 的 null 处理配合使用。 它允许使用紧凑的语法访问可能存在或不存在的对象的属性。 在访问属性时,它可以与 ?. 运算符一起使用。

实例

interface House {
  sqft: number;
  yard?: {
    sqft: number;
  };
}
function printYardSize(house: House) {
  const yardSize = home.yard?.sqft;
  if (yardSize === undefined) {
    console.log('No yard');
  } else {
    console.log(`Yard is ${yardSize} sqft`);
  }
}

let home: House = {
  sqft: 500,
};

printYardSize(home); // 打印 'No yard'
亲自试一试 »

无效合并

Nullish Coalescence 是另一个 JavaScript 功能,它也适用于 TypeScript 的 null 处理。 它允许在处理 nullundefined 时编写具有回退的表达式。 当表达式中可能出现其他虚假值但仍然有效时,这很有用。 它可以与表达式中的 ?? 运算符一起使用,类似于使用 && 运算符 .

实例

function printMileage(mileage: number | null | undefined) {
  console.log(`Mileage: ${mileage ?? 'Not Available'}`);
}

printMileage(null); // 打印 'Mileage: Not Available'
printMileage(0); // 打印 'Mileage: 0'
亲自试一试 »

Null 断言

TypeScript 的推理系统并不完美,有时忽略一个可能是 nullundefined 的有意义的值 。 一种简单的方法是使用强制转换,但 TypeScript 还提供了 ! 运算符作为方便的快捷方式。

实例

function getValue(): string | undefined {
  return 'hello';
}
let value = getValue();
console.log('value length: ' + value!.length);
亲自试一试 »

就像投射一样,这可能是不安全的,应该小心使用。


数组边界处理

即使启用了 strictNullChecks,默认情况下 TypeScript 也会假定数组访问永远不会返回 undefined(除非 undefined 是数组类型的一部分)。

配置 noUncheckedIndexedAccess 可用于更改此行为。

实例

let array: number[] = [1, 2, 3];
let value = array[0]; // 使用 `noUncheckedIndexedAccess`,它的类型为 `number | undefined`
亲自试一试 »