TypeScript 常用方法总结

102 阅读4分钟

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报错 */