Typescript中如何实现Partial<T>

在 TypeScript 中,Partial<T> 是一个内置的工具类型,用于将给定类型 T 中的所有属性转换为可选属性。

1. 示例

ts 复制代码
type Person = {
  name: string;
  age: number;
  address: string;
};

type PartialPerson = Partial<Person>;

/*
    PartialPerson 的类型为:
    {
      name?: string | undefined;
      age?: number | undefined;
      address?: string | undefined;
    }
*/

在上面的示例中,Partial<Person> 将类型 Person 中的所有属性转换为可选属性,添加了 ? 符号。

这样,PartialPerson 类型中的每个属性都可以是该属性的类型或者 undefined

2. 过程

下面是一个手动实现 Partial<T> 的示例:

ts 复制代码
type Partial<T> = {
  [P in keyof T]?: T[P];
};

在上面的示例中,我们使用了映射类型来遍历类型 T 中的每个属性,并将其转换为可选属性。

[P in keyof T] 表示遍历 T 类型中的每个属性,并使用索引签名 P 来表示属性名。

然后,通过添加 ? 符号将属性转换为可选属性,并使用类型 T[P] 来表示属性的类型。

2.1 keyof

在 TypeScript 中,keyof 是一个用于获取类型中所有属性名称的操作符。 它返回一个由类型中所有属性键组成的联合类型。

ts 复制代码
type Person = {
  name: string;
  age: number;
  address: string;
};

type PersonKeys = keyof Person; // 类型为 "name" | "age" | "address"

// `PersonKeys` 类型是 `Person` 类型中所有属性的联合类型。
// 这意味着 `PersonKeys` 只能是 `"name"`、`"age"` 或 `"address"` 这三个字符串字面量类型中的一个。

2.2 测试

ts 复制代码
(() => {
  type Foo = {
    a: string;
    b: number;
    c: boolean;
  };

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

  const a: MyPartial<Foo> = {};

  const b: MyPartial<Foo> = {
    a: "BFE.dev",
  };

  const c: MyPartial<Foo> = {
    b: 123,
  };

  const d: MyPartial<Foo> = {
    b: 123,
    c: true,
  };

  const e: MyPartial<Foo> = {
    a: "BFE.dev",
    b: 123,
    c: true,
  };
})();
相关推荐
蜡台32 分钟前
Uniapp H5Builderx 预览Html 显示404问题解决
前端·uni-app
We་ct39 分钟前
LeetCode 190. 颠倒二进制位:两种解法详解
前端·算法·leetcode·typescript
踩着两条虫1 小时前
AI驱动的Vue3应用开发平台深入探究(二十五):API与参考之Renderer API 参考
前端·javascript·vue.js·人工智能·低代码·前端框架·ai编程
信创DevOps先锋1 小时前
本土化突围:Gitee如何重新定义企业级项目管理工具价值
前端·gitee·jquery
圣光SG1 小时前
Java类与对象及面向对象基础核心详细笔记
java·前端·数据库
Jinuss1 小时前
源码分析之React中的useImperativeHandle
开发语言·前端·javascript
ZC跨境爬虫1 小时前
CSS核心知识点与定位实战全解析(结合Playwright爬虫案例)
前端·css·爬虫
Jinuss2 小时前
源码分析之React中的forwardRef解读
前端·javascript·react.js
mengsi552 小时前
Antigravity IDE 在浏览器上 verify 成功但本地 IDE 没反应 “开启Tun依然无济于事” —— 解决方案
前端·ide·chrome·antigravity