TS高级类型 Record、Pick、Partial、Required、Readonly、Exclude、Extract、Omit、NonNullable 使用
keyof
获取类型内所有的 key，即所有属性名 , 获取的是一个 联合类型
这里类型指：通过 interface 或 type 定义的类型；通过 typeof xxx 返回的类型等。keyof 后面必须是类型，不能是具体的对象
interface IPeople {
name:string,
age?: number,
sex: string,
}
type T = keyof IPeople
// 等同于
type T = "name" | "age" | "sex"
注意：keyof any
type TAny = keyof any
// 等同于
type TAny = string | number | symbol //不包括 boolean object等
in
循环类型 一般循环的是 联合类型，把联合类型中每一个属性名赋值给 P
// 使用上面的 T 类型
type TObj = {
[P in keyof T]: any
}
// 等同于
type TObj = {
name: any;
age: any;
sex: any;
}
typeof
ts 中 typeof 是获取数据的类型，常用用于获取 对象、数组、函数、class、枚举等类型
const people = {
name: 'liuyz',
age: 18,
}
type INewPeople = typeof people
// 等同于
// type INewPeople = {
// name: number
// age: number
// }
const newPeople: INewPeople = {
name: "zhi",
age: 18,
}
type TKeys = keyof typeof newPeople
// 等同于
// type TKeys = "name" | "age"
具体细节看最下面
Record
将 K 中的所有属性值都转换为 T 类型，并返回新的对象类型
type Record = {
[P in K]: T;
};
- keyof any: 等同于 string | number | symbol ，也就是说 K 只能是这三种类型
- P in K: 指循环 K 类型
type TKeys = 'A' | 'B' | 'C'
interface IPeople {
name:string,
age?: number,
sex: string
}
type TRecord = Record
// 等同于
type TRecord = {
B: IPeople;
C: IPeople;
A: IPeople;
}
Pick
从 T 类型中选取部分 K 类型，并返回新的类型，这里 T 常用于对象类型
type Pick = {
[P in K]: T[P];
};
- keyof T 获取 T 中所有的 key 属性
- K extends keyof T K 必须继承于 keyof T ,如果 K 中的属性有不属于 keyof T 的则会报错
interface IPeople {
name:string,
age?: number,
sex: string,
}
type TPick = Pick
// 等同于
type TPick = {
name: string;
age?: number | undefined;
}
注意： 如果想生成的 TPick 包含自定义属性，则需要在 IPeople 中添加 [key: string]: any
interface IPeople {
name:string,
age?: number,
sex: string,
[key: string]: any
}
type TPick = Pick
等同于
type TPick = {
name: string;
age?: number | undefined;
color: any;
}
类似于
const getValue = (obj:T, name:K):T[K] => {
return obj[name]
}
Partial
将T中的所有属性设置为可选
type Partial = {
[P in keyof T]?: T[P];
};
- keyof T 获取 T 的所有属性
- ?: 可选参数
interface IPeople {
name:string,
age?: number,
sex: string,
}
type TPartial = Partial
// 等同于
type TPartial = {
name?: string | undefined;
age?: number | undefined;
sex?: string | undefined;
}
Required
使 T 中的所有属性都变成必需的
type Required = {
[P in keyof T]-?: T[P];
}
- -?: 通过 -? 把所有属性变成 必需的
interface IPeople {
name:string,
age?: number,
sex: string,
}
type TRequired = Required
// 等同于
type TRequired = {
name: string;
age: number;
sex: string;
}
Readonly
将 T 中的所有属性设为只读
type Readonly = {
readonly [P in keyof T]: T[P];
}
- readonly: 只读属性
interface IPeople {
name:string,
age?: number,
sex: string,
}
type TReadonly = Readonly
// 等同于
type TReadonly = {
readonly name: string;
readonly age?: number | undefined;
readonly sex: string;
}
Exclude
从T中剔除可以赋值给U的类型
type Exclude = T extends U ? never : T
- 当 T 是联合类型时，则会循环 T 类型即： (T1 extends U ? never : T1) ｜ (T2 extends U ? never : T2) | …
type TExclude1 = Exclude<"a" | "b", "a" | "c">
// 等同于
type TExclude1 = "b"
type TExclude2 = Exclude
// 等同于
type TExclude2 = number | boolean
Extract
提取T中可以赋值给U的类型
type Extract = T extends U ? T : never
- 当 T 是联合类型时，则会循环 T 类型即： (T1 extends U ? T1 : never ) ｜ (T2 extends U ? T2 : never ) | …
type TExtract1 = Extract<"a" | "b", "a" | "c">
// 等同于
type TExtract1 = "a"
type TExtract2 = Extract
// 等同于
type TExtract2 = string
type TExtract3 = Extract
// 等同于
type TExtract3 = never
Omit
获取 T 中不包含 K 属性的 新类型
type Omit = Pick>
- keyof any 等同于 string | number | symbol ，也就是说 K 只能是这三种类型
- keyof T 获取 T 的所有属性
- Exclude 从T中剔除可以赋值给U的类型
- Pick 从 T 类型中选取部分 K 类型，并返回新的类型，这里 T 常用于对象类型
说明：先通过 Exclued 获取 T 中不包含 K 属性的新类型， 再通过 Pick 获取 T 中包含 K 属性的新类型
interface IPeople {
name:string,
age?: number,
sex: string,
}
type TOmit = Omit
// 等同于
type TOmit = {
age?: number | undefined;
}
NonNullable
去除 null 和 undefined 后的新类型
type NonNullable = T extends null | undefined ? never : T
- 当 T 是联合类型时，则会循环 T 类型即： (T1 extends U ? never : T1) ｜ (T2 extends U ? never : T2) | …
type TType= number | null | undefined
type TNonNullable = NonNullable
// 等同于
// type TNonNullable = number
typeof具体使用
对象使用
自动生成对象的类型，如果对象上有类型则使用定义的类型
对象上无类型
const people = {
name: "liuyz",
age: 20,
info: {
sex: "man",
hobby: "sleep",
}
}
type IPeople = typeof people
// 等同于
// type IPeople = {
// name: string
// age: number
// info: {
// sex: string
// hobby: string
// }
// }
type IPeople = keyof typeof people // keyof 只会获取数据类型的第一级属性key
// 等同于
// type IPeople = "name" | "age" | "info"
对象上有类型
type IPeople = {
name: string | number
age: number
}
const people: IPeople = {
name: 9527,
age: 18,
}
type INewPeople = typeof people
// 等同于
// type INewPeople = IPeople = {
// name: string | number
// age: number
// }
const newPeople: INewPeople = {
name: "liuyz",
age: 18,
}
函数使用
const add = (a: number, b: number): number => {
return a + b
}
type TFunType = typeof add // 获取函数类型
// 等同于
// type TFunType = (a: number, b: number) => number
type TReturnType = ReturnType // 获取函数返回值类型
// 等同于
// type TReturnType = number
type TParamsType = Parameters // 获取函数参数类型，转变为元组类型
// 等同于
// type TParamsType = [a: number, b: number] // 元组类型
数组使用
const arr = ['liu', 'y', 'z']
type IArr = typeof arr
// 等同于
// type IArr = string[]
const arr = ['liu', 'y', 1]
type IArr = typeof arr
// 等同于
// type IArr = (string | number)[] // 字符串或数字 数组
type IKey = keyof typeof arr
// 等同于
// type IKey = keyof string[]
注意：数组上使用 keyof typeof arr 是没有意义的
枚举使用
enum EDirection {
UP = "UP",
DOWN = "DOWN",
}
type TDirection = typeof EDirection
const direction: TDirection = {
UP: EDirection.UP,
DOWN: EDirection.DOWN,
}
console.log(direction) // { UP: 'UP', DOWN: 'DOWN' }
type TNewDirection = keyof typeof direction
// 等同于
// type TNewDirection = "UP" | "DOWN"
let newDirection: TNewDirection = "DOWN" // 这里只能取值 UP 或 DOWN
基本类型使用
基本类型使用 并没有什么意义
const bool = true
type TBool = typeof bool
// 等同于
// type TBool = true
let newBool: TBool = true // 此时 newBool 只能赋值 true，否则报错
const str = "test"
type IStr = typeof str
// 等同于
// type IStr = "test"
let newStr: IStr = "test" // 此时 newStr 只能赋值 test，否则报错
const num = 10
type INum = typeof num
// 等同于
// type INum = 10
let newNum: INum = 10 // 此时 newNum 只能赋值 10，否则报错