ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

写TS效率大提升,TypeScript中常用内置工具类型Omit、Pick、Partial、Required、Readonly、Exclude 、Extract

2022-05-29 02:31:07  阅读:152  来源: 互联网

标签:Partial string Omit TS number Person interface id name


TS中常用的工具映射类型,让写TS时效率大大提升,避免无意义的重复性定义。

1.Omit 省略/剔除

顾名思义 可以剔除 已定义对象中 自己不需要的一部分形成新的定义类型。

interface UserObj {
    readonly name: string; // readonly 只读属性 只能初始化定义 不能二次赋值
    age: number;
    id: number;
    sex: 0 | 1;
    address: string;
    weight: number;
}

// 剔除省略自己不需要的
type Person = Omit<Person, "number" | "sex"  | "address" | "weight">;

// 此时Person 等同于 Person1

interface Person1 {
    readonly name: string;
    id: number;
}


// Omit 的源码
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

2.Pick 采集

顾名思义,可以采集 已定义对象中 自己需要的一部分形成新的定义类型。

interface UserObj {
    readonly name: string;
    age: number;
    id: number;
    sex: 0 | 1;
    address: string;
    weight: number;
 }
 
 // 采集需要的
 type Person = Pick<UserObj, "name" | "id">;
 
 // 此时Person 等同于 Person1
 interface Person1 {
     readonly name: string;
     id: number;
}
// Pick 的源码
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

3.Partial

可把定义好的对象(包含 必选+可选项)类型全部转化为可选项

// 已有定义类型Person
interface Person {
    name: string;
    age: number;
    id: number;
    sex: 0 | 1;
    address: string;
    weight: number;
}

// 使用方法
const newObj: Partial<Person> = {
    name: '张三' // 假如只需要一项 Partial的便捷性 可以不需要从新定义类型
};

// Partial<Person>等同于 NewPerson
interface NewPerson {
    name?: string;
    age?: number;
    id?: number;
    sex?: 0 | 1;
    address?: string;
    weight?: number;
}

Partial的源码,非常简单,自己就可以实现一个简易版
type Partial<T> = {
    [P in keyof T]?: T[P];
};

4.Required (必选的)

Required 和 Partial刚好相反,可把定义好的对象(包含 必选+可选项)类型全部转化为 必选项

// 已有定义类型Person
interface Person {
    name: string;
    age: number;
    id?: number;
    sex?: 0 | 1;
}

// 使用方法
const newObj: Required<Person> = {
    name: '张三',
    age: 1,
    id: 1,
    sex: 1
};

// Required<Person>等同于 NewPerson
interface NewPerson {
    name: string;
    age: number;
    id: number;
    sex: 0 | 1;
}

Required的源码实现也非常简单,"-?" 意思是移除可选属性
/**
 * Make all properties in T required
 */
type Required<T> = {
    [P in keyof T]-?: T[P];
};

5.Readonly (转化只读)

Readonly 就是为类型对象每一项添加前缀 Readonly

interface Person {
    readonly name: string; // 只有这一项有readonly
    age: number;
    id?: number;
}

// 使用方法
const newObj: Readonly<Person> = {
    name: '张三',
    age: 1,
    id: 1
};
// newObj.name = '李四'; // 异常 因为有readonly只读属性,只能初始化声明,不能赋值。

// Readonly<Person> 等同于 NewPerson
interface NewPerson {
    readonly name: string;
    readonly age: number;
    readonly id?: number;
}

Readonly的源码实现也非常简单
/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

6.Extract (提取/包括)

// Extract实现源码 原理很简单
type Extract<T, U> = T extends U ? T : never;
interface Person {
    name: string;
}

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

// 案例1
//  NewPerson如果extends继承Person(继承了Person的属性),就返回NewPerson,否则就never异常
const obj: Extract<NewPerson, Person> = {
    name: '',
    age: 1,
    id: 1
}

Extract<NewPerson, Person>此时就等同于NewPerson

7.Exclude (排除/不包括)

和 Extract 正好相反

// Exclude源码
type Exclude<T, U> = T extends U ? never : T;
interface Person {
    name: string;
}

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

// 案例1
// Person如果extends继承NewPerson(继承了NewPerson的属性),就never异常,否则就返回Person
const obj: Exclude<Person, NewPerson> = {
    name: ''
}

Exclude<Person, NewPerson> 此时就等同于Person

未完待续,有空再添加一些不常用的内置映射工具类和 自定义工具类

标签:Partial,string,Omit,TS,number,Person,interface,id,name
来源: https://www.cnblogs.com/tianmiaogongzuoshi/p/16322736.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有