前端 TypeScript 面试题, TypeScript 的内置工具类型 NonNullable 有什么作用?

QA

Step 1

Q:: TypeScript 的内置工具类型 NonNullable 有什么作用？

A:: TypeScript 的 NonNullable 工具类型用于构建一个类型，其中的所有 null 和 undefined 类型被移除。也就是说，它从给定的类型中排除 null 和 undefined，从而确保该类型中的值不会为 null 或 undefined。这在你确保一个变量或参数在某些上下文中总是有值的情况下非常有用。用法示例如下：

 
let value: string | null | undefined;
let nonNullableValue: NonNullable<typeof value>;

在这个示例中，nonNullableValue 的类型将会是 string。

Step 2

Q:: 如何使用 NonNullable 工具类型处理类型中的 null 和 undefined？

A:: 你可以使用 NonNullable 工具类型来强制去除一个类型中的 null 和 undefined，从而确保该类型总是包含有效值。这通常用于函数的参数类型或返回类型的定义中，尤其是在你确定不需要处理 null 或 undefined 的情况下。例如：

 
type User = {
  name: string;
  age?: number | null;
};
 
function processUser(user: NonNullable<User['age']>) {
  // 这里的 user 一定不是 null 或 undefined
}

在这个例子中，processUser 函数接受的参数 user 将被限定为 number 类型，去除了可能的 null 或 undefined。

用途

NonNullable 工具类型在实际生产环境中非常重要，特别是在处理可能包含 null 或 undefined 的复杂数据类型时。它有助于防止潜在的运行时错误，确保代码在处理关键数据时的类型安全性。这在处理外部 API 返回数据或表单输入时尤其重要，因为这些数据源通常会包含可选值（即可能为 null 或 undefined）。通过使用 NonNullable，可以在代码编译阶段捕获潜在的问题，从而避免因处理空值引发的异常情况。\n

相关问题

🦆

TypeScript 中的 Partial 工具类型有什么作用?▷

Partial 工具类型用于构造一个类型，使其所有属性都变为可选（即可能为 undefined）。这对于在需要部分更新对象或创建对象时非常有用，特别是在构建配置对象或数据模型时。例如：

 
type User = {
  name: string;
  age: number;
};
 
let partialUser: Partial<User> = {};

在这个例子中，partialUser 可以是空对象、仅包含 name 或 age 中的一个属性，或者同时包含两者。

🦆

TypeScript 中的 Required 工具类型有什么作用?▷

Required 工具类型用于将类型中的所有可选属性变为必需的。这在确保对象完全初始化或在需要严格验证对象结构时非常有用。例如：

 
type User = {
  name?: string;
  age?: number;
};
 
let requiredUser: Required<User> = {
  name: 'John',
  age: 30
};

在这个例子中，requiredUser 必须包含 User 类型的所有属性，且不能省略任何一个。

🦆

TypeScript 的 Exclude 工具类型有什么作用?▷

Exclude 工具类型用于从一个联合类型中排除指定的类型。这在你想要精确控制某些类型的排除时非常有用。例如：

 
type T = string | number | boolean;
type NonBoolean = Exclude<T, boolean>;

在这个例子中，NonBoolean 的类型将会是 string | number，因为 boolean 类型被排除在外。

🦆

TypeScript 的 Pick 工具类型有什么作用?▷

Pick 工具类型用于从给定的类型中挑选出指定的属性。这对于构造只包含特定属性的类型非常有用，尤其是在大型接口中你只需要其中一部分属性时。例如：

 
type User = {
  name: string;
  age: number;
  address: string;
};
 
type UserSummary = Pick<User, 'name' | 'age'>;

在这个例子中，UserSummary 类型将只包含 name 和 age 两个属性。

什么是 TypeScript 的 unknown 类型和 any 类型有什么区别 TypeScript 的关键字 extends 有什么作用