TypeScript Partial|极客教程

TypeScript Partial

简介

在 TypeScript 中，Partial 是一种特殊的类型，通过它可以将传入的类型所有属性变为可选的。在某些场景下，我们可能需要在不改变原有类型定义的情况下，只使用类型的部分属性，这时就可以使用 Partial 来实现。

Partial 的使用

Partial 的使用非常简单，只需要在类型前面加上 Partial<类型名> 即可。下面是一个简单的示例：

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

const createPerson = (person: Partial<Person>) => {
  // ...
};

const personToCreate: Partial<Person> = {
  name: "Alice",
};

createPerson(personToCreate);

在上面的示例中，我们定义了一个 Person 接口，其包含 name 和 age 两个属性。接着，我们定义了一个函数 createPerson，它的参数类型为 Partial<Person>，即部分 Person 类型。在函数内部，我们可以使用 person 参数的属性，但需要注意这些属性都是可选的。

接着，我们创建了一个类型为 Partial<Person> 的变量 personToCreate，只指定了 name 属性。最后，我们调用了 createPerson 函数，并将 personToCreate 传入。

Partial 的实现原理

Partial 的实现原理并不复杂，我们可以自己手动实现一个 Partial 类型：

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

上面的代码中，我们使用了 TypeScript 的映射类型，通过 keyof 关键字获得对象 T 的所有属性，然后将这些属性变为可选的。

Partial 的应用场景

Partial 在某些场景下非常实用，下面列举了几个常见的应用场景。

部分属性可选

我们经常遇到这样的场景：一个函数接受一个含有多个属性的对象作为参数，但并不是所有属性都是必需的。这时，我们就可以使用 Partial 来将函数参数的类型的所以属性都变为可选的。下面是一个示例：

interface Config {
  host: string;
  port: number;
  secure: boolean;
  username: string;
  password: string;
}

const connect = (config: Partial<Config>) => {
  // ...
};

const config: Partial<Config> = {
  host: "example.com",
  port: 8080,
};

connect(config);

在上面的示例中，我们定义了一个 Config 接口，包含连接服务器所需的各个属性。然后，我们定义了一个函数 connect，它的参数类型为 Partial<Config>，即部分 Config 类型。调用 connect 函数时，只需要传入类型为 Partial<Config> 的参数即可。

动态更新对象属性

在 TypeScript 中，对象的属性是只读的，如果想要修改对象的属性，必须重新创建一个新的对象。Partial 可以方便地实现动态更新对象的部分属性。下面是一个示例：

interface User {
  id: string;
  name: string;
  age: number;
}

const updateUser = (user: Readonly<User>, updates: Partial<User>): User => {
  return {
    ...user,
    ...updates,
  };
};

const initialUser: Readonly<User> = {
  id: "001",
  name: "Alice",
  age: 25,
};

const updatedUser = updateUser(initialUser, { age: 26 });
console.log(updatedUser);

上面的代码中，我们定义了一个 User 接口，包含用户的 id、姓名和年龄。然后，我们定义了一个函数 updateUser，它接受一个只读的 User 对象和一个 Partial<User> 类型的参数 updates，用于更新 User 对象的部分属性。

在 updateUser 函数中，我们使用展开运算符将 updates 的属性合并到 user 中，从而得到一个新的更新后的对象。

最后，我们以类型为 Readonly<User> 的 initialUser 为基础，调用 updateUser 函数更新 age 属性，并将结果打印出来。

函数调用顺序控制

在一些场景下，我们可能需要按照特定的顺序调用多个函数，并且每个函数需要传入相同的参数类型，但只需要传入部分属性。Partial 可以方便地实现函数调用顺序的控制。下面是一个示例：

interface User {
  name: string;
  age: number;
  email: string;
}

const getUserInfo = (user: Partial<User>) => {
  // ...
};

const sendEmail = (user: Partial<User>) => {
  // ...
};

const notifyUser = (user: Partial<User>) => {
  // ...
};

const user: Partial<User> = {
  name: "Alice",
  age: 25,
};

getUserInfo(user);
sendEmail(user);
notifyUser(user);