前言:大家好,我是一泽,作为一名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:boolean,
name: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:boolean,
name: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