TS内置工具类之Partial、Required、Pick、Record、Readonly、Omit

TS项目开发中,或多或少会遇到一些TS类型与类型之间需转换之处,这时你会怎么做。强大TS类型系统贴心的为开发者提供了部分常用的内置全局工具类型。

我们一起来看看吧。GO GO GO

Partial

其构造一个将 Type 的所有属性设置为可选的类型。此工具将返回一个表示给定类型的所有子集的类型。

示例:

PerInfo类型包含两个属性name和age

ts 复制代码
interface PerInfo {
    name: string;
    age: number;
}

Partial 将PerInfo接口中的属性变为可选属性

ts 复制代码
type Person=Partial<PerInfo>

相当于定义了如下类型

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

Partial源码

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

Required

Partial 相反。Required把传入泛型Type的属性都变为必选项。

ts 复制代码
interface Props {
    a?: number;
    b?: string;
}

const obj: Props = { a: 5 };

const obj2: Required<Props> = { a: 5 };
// Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Required源码

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

Pick

从泛型Type中获取指定属性的类型,相当于得到的新类型只包含你所指定的泛型第二个参数的属性的类型。

示例:

PerInfo类型包含两个属性name和age

ts 复制代码
interface PerInfo {
    name: string;
    age: number;
    sex: string;
}

Partial 将PerInfo接口中的属性变为可选属性

ts 复制代码
type Person=Pick<PerInfo,'name'|'age'>

相当于定义了如下类型

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

Pick源码

ts 复制代码
type Pick<T, K extends keyof T> = { [P in K]: T[P]; }

Record

构造一个对象类型,其属性键为 Keys,其属性值为 Type。可用于将一种类型的属性映射到另一种类型。

示例:

js 复制代码
interface CatInfo {
    age: number;
    breed: string;
}

type CatName = "miffy" | "boris" | "mordred";

type Cats = Record<CatName, CatInfo>

const cats: Record<CatName, CatInfo> = {
    miffy: { age: 10, breed: "Persian" },
    boris: { age: 5, breed: "Maine Coon" },
    mordred: { age: 16, breed: "British Shorthair" },
};

cats.boris;

Record源码

ts 复制代码
type Record<K extends string | number | symbol, T> = { [P in K]: T; }

Readonly

构造一个将 Type 的所有属性设置为 readonly 的类型,这意味着构造类型的属性不能重新分配。

示例:

Omit

通过从 Type 中选择所有属性然后删除 Keys(字符串字面或字符串字面的并集)来构造一个类型。与 Pick 相反。

示例:

ts 复制代码
// 定义User类型
interface User {
    name: string;
    age: number;
    email: string;
    isActive: boolean;
    creditCardDetails: number;
}

Omit构造不包含 creditCardDetails 属性的新类型 LiUser

ts 复制代码
type LiUser = Omit<User, "creditCardDetails">;

Omit构造不包含多个属性 的新类型 TiUser

ts 复制代码
type TiUser = Omit<User, "email" | "isActive">;

Omit源码

ts 复制代码
type Omit<T, K extends string | number | symbol> = { [P in Exclude<keyof T, K>]: T[P]; }

未完待续......

相关推荐
majingming1237 小时前
FUNCTION
java·前端·javascript
A_nanda8 小时前
Vue项目升级
前端·vue3·vue2
SuperEugene8 小时前
Axios 接口请求规范实战:请求参数 / 响应处理 / 异常兜底,避坑中后台 API 调用混乱|API 与异步请求规范篇
开发语言·前端·javascript·vue.js·前端框架·axios
abigale038 小时前
【浏览器 API / 网络请求 / 文件处理】前端文件上传全流程:从基础上传到断点续传
前端·typescript·文件上传·vue cli
Setsuna_F_Seiei9 小时前
AI 对话应用之页面滚动交互的实现
前端·javascript·ai编程
新缸中之脑9 小时前
追踪来自Agent的Web 流量
前端
wefly20179 小时前
从使用到原理,深度解析m3u8live.cn—— 基于 HLS.js 的 M3U8 在线播放器实现
java·开发语言·前端·javascript·ecmascript·php·m3u8
英俊潇洒美少年10 小时前
vue如何实现react useDeferredvalue和useTransition的效果
前端·vue.js·react.js
kyriewen1110 小时前
给浏览器画个圈:CSS contain 如何让页面从“卡成PPT”变“丝滑如德芙”
开发语言·前端·javascript·css·chrome·typescript·ecmascript
英俊潇洒美少年11 小时前
react19和vue3的优缺点 对比
前端·javascript·vue.js·react.js