TS----之映射类型

偶然在知乎看到大佬的文章，特此记录，原文链接

https://zhuanlan.zhihu.com/p/620501674

映射类型

如果我们有多个Key值相同的类型，只是使用时的规定不一样（有时需要readonly），那么这时用映射类型进行复用type，既减少的代码量，又提高了阅读性

TS工具类型

平时开发时使用的工具类型还真的不多，正好借着这个机会学习，加深下印象

1.Partial<T>：将类型 T 中的所有属性变为可选属性

用法：

interface people  {
    name:string,
    age:number
}

function getName(user:people,updateName:Partial<people>){
    return{...updateName}
}

let a = getName({name:'uyyu',age:17},{age:88})

console.log(a);//{age:88}

2.Required<T>：将类型T中的所有可选属性变为必选属性.

用法同上

3.Pick<T，K>：，他可以将类型T中选择指定的属性K，生成一个新的属性。

实际上，就是用Pick从已有的type中，选择需要的属性生成一个新的type，避免代码冗余

用法

interface people  {
    name:string,
    age:number,
    tel:number,
    sex:string
}

type YY = Pick<people, 'name' | 'age'>

let a:YY = {name:'wangcai',age:18}

console.log(a);//{ name: 'wangcai', age: 18 }

4.Omit<T, K>:从类型 T 中删除指定的属性 K，生成一个新的类型。

用法同上

interface people  {
    name:string,
    age:number,
    tel:number,
    sex:string
}

type YY = Omit<people, 'name' | 'age'>//用Omit去掉了people中的name和age

let a:YY = {tel:3335,sex:'woman'}

console.log(a);//{ tel: 3335, sex: 'woman' }

当联合类型中，我们想操作一些属性的变化，也可以用Omit,实在想不到什么恰当的例子，随便写了写:

在联合类型User和Student中，去掉了公共的email属性，加上了sex和name属性，有点脱裤子放屁的感觉...

type User = {
    email:string,
    school:string,
    tel:number
}


type Student = {
    name:string,
    age:number,
    email:string
}

type People = Omit<User|Student,'email'> & {sex:string,name:string}

let yy:People = {
    sex:'woman',
    name:'yy'
}
console.log(yy);//{ sex: 'woman', name: 'yy' }

5.Record<K, T>: 它可以生成一个类型为 T 的对象，其中属性名的类型为 K

这个类型在开发中可以常用，写一写映射比较方便，划重点

type People = Record<string, number>

let a:People = {
    name:23243,
    age:9990,
    tel:130130
}




interface Animal{
    name:string,
    age:number,
    size:string
}

type Dog = Record<string,Animal>

let wangcai:Dog = {
    'dog':{
        name:'wangcai',
        age:18,
        size:'small'
    }
}

还有其他很多种工具类，其余的以后慢慢了解

像大佬一样使用映射类型

为什么要用映射类型

当我们已经有一个type，现在需要用到的类型，里面的属性和已有的type一样只是都为只读的，或者其他情况。怎样良好的对已有类型进行复用？

type User = {
    name:string;
    age:number;
    sex:string;
}
//现在只是想把User中的属性变成只读属性
type ReadonleUser = {
    readonly name:string;
    readonly age:number;
    readonly sex:string;
}
//现在只是想把User中的属性变成可选属性
type UserPartial = {
    name?:string;
    age?:number;
    sex?:string;
}

如果每次都要重新写一遍岂不是太冗余?于是这个时候就适合用到映射

如果只需要把type User中的每个属性，变成只读

其中的P in 相当于我们JS遍历对象中的for in

type User = {
    name:string;
    age:number;
    sex:string;
}
type ReadonlyUser = {readonly [P in keyof User] : User[P]}

let people:ReadonlyUser = {
    name:'yyh',
    age:33,
    sex:'woman'
}

那如果把type User中的属性都变成可选的，就简单了

type UserPartial = {[P in keyof User] ?: User[P]}
let people:UserPartial = {
    name:'yyh',
    sex:'woman'
}
console.log(people);//{ name: 'yyh', sex: 'woman' }