TypeScript 常用方法总结
剔除选中属性剩余的组成新的类型
Omit 使用方法:
interface RegionType {
a:string;
b:number;
c:boolean;
d:string[];
e:number[];
}
/**用法 Omit<源类型, "需要剔除的属性名1"|"需要剔除的属性名2"|"需要剔除的属性名3"|...> */
/**剔除RegionType 中的 a 和 d 属性 */
type TargetType = Omit<RegionType,"a"|"d">
/**
* 结果为
{
b:number;
c:boolean;
e:number[];
}
* a 和 d 被剔除了
*/
挑选选中属性组成新的类型
Pick 使用方法:
interface RegionType {
a:string;
b:number;
c:boolean;
d:string[];
e:number[];
}
/**用法 Pick<目标属性,"需要挑选的属性名1"|"需要挑选的属性名2"|"需要挑选的属性名3"|...> */
/**挑选RegionType 中的 a 和 d 属性,组成新的类型 */
type TargetType = Pick<RegionType,"a"|"d">
/**
* 结果为
{
a:string;
d:string[];
}
* a 和 d 组成了新的属性
*/
求两个类型的差集
Exclude
type AType = "a" | "b" | "c" | "d"
type BType = "a" | "b" | "e"
/**用法 Exclude<被差类型, 差类型> */
/**在数学中 集合A - 集合B 集合A属于被差集合 集合B属于差集合 */
type exType = Exclude<AType, BType>
/**
* 结果
exType = "c" | "d"
其实就是在AType中 去除同时在AType 和 BType 中的类型 结果组成一个新的类型
*/
求两个集合的交集
Extract
type AType = "a" | "b" | "c" | "d"
type BType = "a" | "b" | "e"
/**用法 Exclude<类型1, 差类2> */
/**在数学中 集合A ∩ 集合B */
type exType = Extract<AType, BType>
/**
* 结果
exType = "a" | "b"
其实就是取出 同时在AType 和 BType 中的类型 结果组成一个新的类型
*/
获取函数的返回值类型
ReturnType
type fooType = ()=>{ a:number; b:string[]; c:boolean; }
/**用法 ReturnType<函数类型> 注意这里不是传函数而是传函数类型 */
/** 返回函数类型为fooType 的返回值 */
type fooReturnType = ReturnType<fooType>
/**
* 结果为
{ a:number; b:string[]; c:boolean; }
*/
获取函数参数类型
Parameters
type fooType = (param:{ a:number; b:string[]; c:boolean; },name:string)=>void
/**用法 Parameters<函数类型> 注意这里不是传函数而是传函数类型 */
/** 返回函数类型为fooType 的参数类型 */
type fooReturnType = Parameters<fooType>
/**
* 结果为
[param: {
a: number;
b: string[];
c: boolean;
}, name: string]
*/
用规定的key和value类型组成新的对象类型
Record
但是 {[key in Keys]: ValueType},在日常开发中用的会比较多一点
type namesType = "xiaoming" | "xiaohong" | "ximi" | "luci";
type infoType = {
age: number;
sex: 0 | 1;
height: number;
weight: number;
IQ: number;
}
/**用法 Record<Keys,ValueType> */
type personInfoType = Record<namesType, infoType>
/**结果为
personInfoType = {
xiaoming: infoType;
xiaohong: infoType;
ximi: infoType;
luci: infoType;
}
*/
/**还有 [key in Keys]:ValueType 可以达到同样的效果 */
type cpType = {
[k in namesType]:infoType
}
/**结果为
personInfoType = {
xiaoming: infoType;
xiaohong: infoType;
ximi: infoType;
luci: infoType;
}
*/
将对象所有属性转换为必选值
Requiredy
type expType = {
key1?: number;
key2: string;
}
/**用法 Required<对象类型> */
type requiredExpType = Required<expType>
/**结果为
requiredExpType = {
key1: number;
key2: string;
}
*/
将对象所有属性转换为可选值
Partial
type expType = {
key1?: number;
key2: string;
}
/**用法 Required<对象类型> */
type partialExpType = Partial<expType>
/**结果为
partialExpType = {
key1?: number | undefined;
key2?: string | undefined;
}
*/
返回泛型的类型
onType extends Type<infer T> ? T : never
type genericsType<T=any,P=any> = {
name: T;
page: P;
}
/**用法 类型名<infer 泛型1,any> ? 泛型1 : never*/
type tType<Type> = Type extends genericsType<infer T, any> ? T : never
type pType<Type> = Type extends genericsType<any, infer P> ? P : never
type theT = tType<genericsType<string, number>>
/**结果为
theT = string
*/
type theP = pType<genericsType<string, number>>
/**结果为
theP = number
*/
/**更常用的是这种 */
type fooType<T> = <T>(input: T) => T
const getData:fooType<number> = (input) => input
type dataType<FunType> = FunType extends fooType<infer T> ? T : any
type dataInputType = dataType<typeof getData>
/**结果为
dataInputType = number
*/
属性互斥类型
在同一对象中,
若存在A属性,则不存在B属性;
若存在B属性,则不存在A属性。
/**定义两种需要互斥的类型 */
type AType = {
C: number;
D: string;
E: string[];
A: { hello: string }
AA: number
}
type BType = {
C: number;
D: string;
E: string[];
B: { goodbye: boolean }
}
/**
* 共有的属性是 C,D,E
* 互斥的属性是 (A,AA) 和 (B)
*/
/**准备工作做好了 */
/**挑出互斥的属性 用差集法和属性挑选方法*/
/**当然也可以使用 并集和属性剔除方法 */
type InAType = Pick<AType, Exclude<keyof AType, keyof BType>>
type InBType = Pick<BType, Exclude<keyof BType, keyof AType>>
/**当然挑选的方法可以抽成一个公共类型方法 */
type Without<T, U> = Pick<T, Exclude<keyof T, keyof U>>
/**挑出互斥属性就可以这样来写 */
type InAType_1 = Without<AType, BType>
type InBType_1 = Without<BType, AType>
/**这里思考
* 我们将InAType 的属性全部设置成never 并和 BType 合并
* 就实现了在BType不存在InAtype 的属性
*/
/**那么就有这么一个方法 */
type SetWithoutNever<T, U> = { [k in Exclude<keyof T, keyof U>]?: never }
/**那么互斥类型就是 */
type MutexType<T, U> = (SetWithoutNever<T, U> & U) | (SetWithoutNever<U, T> & T)
const test1: MutexType<AType, BType> = {
C: 1,
D: "",
E: [],
A: {
hello: ""
},
AA: 1
}
const test2: MutexType<AType, BType> = {
C: 1,
D: "",
E: [],
B: { goodbye: false }
}
/**只有test1和test2可以编译通过其他的都不行(但是可以是undefined) */
const test3: MutexType<AType, BType> = {
C: 1,
D: "",
E: [],
A: {
hello:""
},
AA: 1,
B: {goodbye:false}
}
/**test3 TS报错 */