[TypeScript] 第1537天 在TypeScript中如何让接口的所有属性都可选？

[haizhilin2013]

trafficstars

第1537天 在TypeScript中如何让接口的所有属性都可选？

3+1官网

我也要出题

[13837678992]

在TypeScript中，可以使用Partial<T>内置类型工具将接口的所有属性都设置为可选的。Partial<T>接受一个泛型类型参数 T，并返回一个新的类型，该新类型具有 T 的所有属性，但每个属性都是可选的。

interface MyInterface {
  name: string;
  age: number;
  address: string;
}

const myObject: Partial<MyInterface> = {
  // 所有属性都是可选的
  name: "John",
  age: 25,
  address: "123 Main St",
};

[llccing]

在TypeScript中，可以使用映射类型（Mapped Types）来创建一个新的接口，使其所有属性都变为可选的。映射类型允许你根据已有类型创建新的类型，同时可以对属性进行转换或添加修饰符。以下是具体的实现方法：

使用映射类型让接口的所有属性可选

假设有一个接口 Person，我们希望将其所有属性都变为可选的：

interface Person {
  name: string;
  age: number;
  address: string;
}

方法1：使用内置的 Partial 类型

TypeScript提供了一个内置的泛型类型工具 Partial，它可以将所有属性变为可选的：

type PartialPerson = Partial<Person>;

const person1: PartialPerson = {
  name: "Alice"
};

const person2: PartialPerson = {};

方法2：手动实现映射类型

你也可以自己定义一个映射类型，使其将所有属性都变为可选的：

type MakeOptional<T> = {
  [P in keyof T]?: T[P];
};

type OptionalPerson = MakeOptional<Person>;

const person3: OptionalPerson = {
  age: 30
};

const person4: OptionalPerson = {};

解释

1. 内置的 Partial 类型：

   • Partial<T> 是 TypeScript 内置的泛型类型工具，用来构造一个类型，使其所有属性都是可选的。
   • Partial<Person> 生成了一个新类型 PartialPerson，其所有属性都是可选的。

2. 手动实现的映射类型：

   • MakeOptional<T> 是一个映射类型，它遍历类型 T 的所有属性，并将每个属性设为可选的。
   • 关键语法 [P in keyof T] 用于遍历 T 的所有属性键，?: T[P] 表示将这些属性设为可选。

示例

使用 Partial 或自定义的 MakeOptional 类型，可以创建新的对象类型，这些对象类型的所有属性都是可选的：

// 使用 Partial
const person5: Partial<Person> = {
  name: "Bob"
};

// 使用 MakeOptional
const person6: MakeOptional<Person> = {
  address: "123 Main St"
};

console.log(person1, person2, person3, person4, person5, person6);

这样，通过 Partial 或者自定义的映射类型 MakeOptional，可以方便地将接口的所有属性都设为可选，灵活性更高。