类型体操速通(一):前置知识储备

271 阅读2分钟

前言:大家好,我是一泽,作为一名Web前端开发人员,TS是我们必须掌握的,回想起去年刚接触TS时,为了项目不报TS类型错误,常常把TS写成anyscript,同事问我这个接口新字段是啥类型,我非常肯定地回了他 "any"...有时候甚至用 // eslint-disable-next-line @typescript-eslint/no-empty-interface这行代码自己骗自己。

现在带我的同事是一个TS类型体操专业运动员,维护他的项目经常看不懂一些优雅的代码,没办法只能好好学一下了

那么在做体操之前,我们需要把一些基本动作熟记于心

  • 首先是最最起码的自带类型 boolean | number | string | [] | unknown | void | never | undefined | null
  • 对于 类型别名type、接口interface、枚举enum三种类型声明,我们得知道这三者分别是怎么用的
  • 然后是泛型 <T> 、断言 as、类型推断infer、继承extends这些关键词
  • 联合类型 | 交叉类型(相同类型合并,不同类型舍弃)&
  • 可选标识符? 非空断言标识符!只读标识符readonly
  • keyof取 interface 的键,取到键后会保存为联合类型。in取联合类型的值。主要用于数组和对象的键构造

interface UserInfo { name: string; age: number; } 
type keys = keyof UserInfo; //'name'|'age'

type Todo = 'learning' | 'playing';
type MyTodo = { [key in name]: string; };

OK , 然后到第二步,我们需要会用一些常见的TS高级类型,也就是内置体操

-用的最多的一定是取键Pick< Type, Keys >

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
}
/**---demo----**/
interface Men {
  isSingle:booleanname:string,
  isHandSome:boolean
}
 
type Yize = Pick<Men, 'isSingle' | 'isHandSome'>;

const yize: Yize = {
  isSingle: true,
  isHandSome: false,
};
  • Partial< Type > 传进去的Type的键都是可选的, 与Required< Type >必选Readonly< Type >只读形成关联
type Partial<T> = {
    [P in keyof T]?: T[P];
}
/**---demo----**/
type Men={
    isMarry:booleanname:string,
    age:number
}
const Yize:Partial<Men> = {}
  • Record<Keys, Type>将一个类型的属性映射到另一个类型
type Record<K extends keyof any, T> = {
    [P in K]: T;
};
/**---demo----**/
interface Person {
    name: string,
    age: number,
}
type names = 'yize' | 'yizeze';

type Group = Record<names, Person>

const personGroup: PersonGroup = {
    yize: {
        name: 'yize',
        age: 25
    },
    yizeze: {
        name: 'yizeze',
        age: 26
    }
}
  • Omit<Type, Keys>只要对象的某个属性,删除不要的属性,不修改原有对象
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>
/**---demo----**/
type Person = {
    name: string,
    age: number,
    sex: string,
}
const yize: Omit<Person, 'name' | 'age'> = { sex: 'Men' }

  • ReturnType< FnType >获取函数的返回值类型
const fn = (): number => 1 
type Num = ReturnType<typeof fn> 
const num: Num = 1

基本的前置知识还有很多,但学到这里就够用了~