1、OptionalKeys

获取对象类型中的可选属性的联合类型

  1. type a1 = OptionalKeys<{ foo: number | undefined, bar?: string, flag: boolean }>        // bar
  2. type a2 = OptionalKeys<{ foo: number, bar?: string }>                                   // bar
  3. type a3 = OptionalKeys<{ foo: number, flag: boolean }>                                  // never
  4. type a4 = OptionalKeys<{ foo?: number, flag?: boolean }>                                // foo|flag
  5. type a5 = OptionalKeys<{}>                                                              // never

实现：

  1. type Equals<X, Y> =
  2.     (<T>() => T extends X ? 1 : 2) extends
  3.     (<U>() => U extends Y ? 1 : 2) ? true : false
  4. //遍历T的K，如果原始的属性K与加可选`?`构造对象相同，说明此属性为可选属性
  5. type OptionalKeys<T> = {
  6.     [K in keyof T]: Equals<{ [F in K]: T[F] },
  7.         { [F in K]?: T[F] }> extends true ? K : never
  8. }[keyof T]
  12. //另外一种思路：就是如果去除一个属性还能与原对象相同，说明就是可选属性
  13. type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
  15. type OptionalKeys<T> = {
  16.     [K in keyof T]: Omit<T, K> extends T ? K : never
  17. }[keyof T]

2、PickOptional

保留一个对象中的可选属性类型

  1. type a1 = PickOptional<{ foo: number | undefined, bar?: string, flag: boolean }>        // {bar?:string|undefined}
  2. type a2 = PickOptional<{ foo: number, bar?: string }>                                   // {bar?:string}
  3. type a3 = PickOptional<{ foo: number, flag: boolean }>                                  // {}
  4. type a4 = PickOptional<{ foo?: number, flag?: boolean }>                                // {foo?:number,flag?:boolean}
  5. type a5 = PickOptional<{}>                                                              // {}

实现：

  1. type Equals<X, Y> =
  2.     (<T>() => T extends X ? 1 : 2) extends
  3.     (<U>() => U extends Y ? 1 : 2) ? true : false
  5. type OptionalKeys<T> = {
  6.     [K in keyof T]: Equals<{ [F in K]: T[F] },
  7.         { [F in K]?: T[F] }> extends true ? K : never
  8. }[keyof T]
  10. //关键就是实现OptionalKeys类型，看上图有两种处理方式
  11. type PickOptional<T> = {
  12.     [K in OptionalKeys<T>]?: T[K]
  13. }

3、RequiredKeys

保留一个对象中的必须属性

  1. type a1 = PickRequired<{ foo: number | undefined, bar?: string, flag: boolean }>        // {foo:number|undefined,flag:boolean}
  2. type a2 = PickRequired<{ foo: number, bar?: string }>                                   // {foo:number}
  3. type a3 = PickRequired<{ foo: number, flag: boolean }>                                  // {foo:number,flag:boolean}
  4. type a4 = PickRequired<{ foo?: number, flag?: boolean }>                                // {}
  5. type a5 = PickRequired<{}>                                                              // {}

实现：

  1. type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
  3. type RequiredKeys<T> = {
  4.     [K in keyof T]: Omit<T, K> extends T ? never : K
  5. }[keyof T]

4、PickRequired

保留一个对象中的必须属性

  1. type a1 = PickRequired<{ foo: number | undefined, bar?: string, flag: boolean }>        // {foo:number|undefined,flag:boolean}
  2. type a2 = PickRequired<{ foo: number, bar?: string }>                                   // {foo:number}
  3. type a3 = PickRequired<{ foo: number, flag: boolean }>                                  // {foo:number,flag:boolean}
  4. type a4 = PickRequired<{ foo?: number, flag?: boolean }>                                // {}
  5. type a5 = PickRequired<{}>                                                              // {}

实现：

  1. type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
  3. type OptionalKeys<T> = {
  4.     [K in keyof T]: Omit<T, K> extends T ? K : never
  5. }[keyof T]
  7. //需要采用提出可选属性的方式获得必须属性，否则联合类型的值，undefined会消失（foo: number | undefined）
  8. type PickRequired<T> = Omit<T, OptionalKeys<T>>

5、Merge

合并两个对象类型T以及K，如果属性重复，则以K中属性类型为准

  1. type obj1 = {
  2.     el: string,
  3.     age: number
  4. }
  6. type obj2 = {
  7.     el: HTMLElement,
  8.     flag: boolean
  9. }
  11. type obj3 = Merge<obj1, obj2>   // {el:HtmlElement,age:number,flag:boolean}
  13. const a = {...{} as obj3}
  14. console.log(a.el.scrollTop, a.age.toFixed(0), a.flag.valueOf())
  15. // console.log(a.el.charAt(0))     // error

实现：

  1. //优先返回U中的键值对方式
  2. type Merge<T extends object, U extends object> = {
  3.     [key in (keyof T | keyof U)]: key extends keyof U ? U[key] : key extends keyof T ? T[key] : never
  4. }

6、IsNever

判断是否为never类型

  1. type A = IsNever<never> // true
  2. type B = IsNever<string> // false
  3. type C = IsNever<undefined> // false
  4. type D = IsNever<any> // false

实现：

  1. type IsNever<T> = [T, never] extends [never, T] ? true : false

7、IsEmptyType

判断是否为没有属性的对象类型{}

  1. type A = IsEmptyType<string> // false
  2. type B = IsEmptyType<{ a: 3 }> // false
  3. type C = IsEmptyType<{}> // true
  4. type D = IsEmptyType<any> // false
  5. type E = IsEmptyType<object> // false
  6. type F = IsEmptyType<Object> // false
  7. type G = IsEmptyType<unknown> // false

实现：

  1. type IsEmptyType<T> = T extends object ? [keyof T] extends [] ? true : false : false

8、IsAny

判断是否为any类型

  1. type A = IsAny<string> // false
  2. type B = IsAny<any> // true
  3. type C = IsAny<unknown> // false
  4. type D = IsAny<never> // false

实现：

  1. // unknown 只能赋值给 any或者unknown
  2. // any可以赋值给string，但是unknown不可以赋值给string
  3. type IsAny<T> = [unknown] extends [T] ? [T] extends [string] ? true : false : false
  7. //还有一种更加简洁的写法，通过any可以被赋值任意类型，而其它不行的特性
  8. type IsAny<T> = 0 extends (1 & T) ? true : false

9、Redux Connect

实现Connect类型，能够自动地转化Redux Module对象中的函数类型

  1. interface Module {
  2.     count: number;
  3.     message: string;
  5.     asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>;
  7.     syncMethod<T, U>(action: Action<T>): Action<U>;
  8. }
  10. interface Action<T> {
  11.     payload?: T;
  12.     type: string;
  13. }
  15. // 这个要求的结果
  16. type Result = {
  17.     asyncMethod<T, U>(input: T): Action<U>;
  18.     syncMethod<T, U>(action: T): Action<U>;
  19. }
  21. // 实现类型Connect，要求 Connect<Module> 的结果为上面的 Result
  22. // 只要函数类型的属性；
  23. // 如果函数是异步函数，要求自动解析出来Promise中的类型；

实现：

  1. //获取普通属性的key
  2. type NormalKeys<T> = {
  3.     [K in keyof T]: T[K] extends (...args: any) => any ? never : K
  4. }[keyof T]
  5. //剔除非函数属性
  6. type FunctionOptional<T> = Omit<T, NormalKeys<T>>
  8. type InferConnectFunctionParameterType<Func> =
  9.     Func extends (<T, U>(input: Promise<T>) => Promise<Action<U>>) ? (<T, U>(input: T) => Action<U>) :
  10.     Func extends (<T, U>(action: Action<T>) => Action<U>) ? (<T, U>(action: T) => Action<U>) : never
  12. type Connect<T extends object> = {
  13.     [K in keyof FunctionOptional<T>]: InferConnectFunctionParameterType<T[K]>
  14. }

10、UnionToBooleanProps

有且只有一个属性

  1. // 实现一个叫做 UnionToBooleanProps 的泛型，使得以下需求成立
  3. type MessageStringType = "info" | "success" | "warning" | "error";
  4. type OneMessageTypes = UnionToBooleanProps<MessageStringType>
  5. type Props = OneMessageTypes & { id: string; }
  6. function Component(props: Props) {
  7.     return <></>
  8. }
  10. const a = <Component id="abc" info/>           //correct
  11. const b = <Component id="abc" success/>        //correct
  12. const c = <Component id="abc"/>                //wrong
  13. const d = <Component id="abc" info success/>   //wrong
  15. // 组件Component所接收的属性，有且只有一个 "info" | "success" | "warning" | "error" 中的值；

实现：

  1. //联合类型extends时会分发，利用此特性生成如下结构
  2. type UnionToBooleanProps<T extends string, U extends string = T> =
  3.     T extends any ? { [k in Exclude<U, T>]?: void } & { [k in T]: boolean } : never
  5. /**
  6. {
  7.     info: boolean;
  8.     success?: void;
  9.     warning?: void;
  10.     error?: void
  11. } | {
  12.     info?: void;
  13.     success: boolean;
  14.     warning?: void;
  15.     error?: void
  16. } | {
  17.     info?: void;
  18.     success?: void;
  19.     warning: boolean;
  20.     error?: void
  21. } | {
  22.     info?: void;
  23.     success?: void;
  24.     warning?: void;
  25.     error: boolean
  26. }
  27.  */

11、UnionToIntersection

将联合类型转换为交叉类型

  1. type A = UnionToIntersection<{a: string} | {b: string} | {c: string}> 
  2. // {a: string} & {b: string} & {c: string}

实现：

  1. type UnionToIntersection<T> = (T extends infer R ? (x: R) => any : never) extends (x: infer V) => any ? V : never
  2. /**
  3.  * 1. T extends infer R ? (x: R) => any : never 将生成一个函数的联合类型，就像下面这样：
  4.  *      (x: {a: string}) => any | (x: {b: string}) => any | (x: {c: string}) => any
  5.  * 
  6.  * 2. extends (x: infer V) => any ? V : never 将会寻找联合函数的超集，而满足条件的就是下面这样的函数
  7.  *      (x: {a: string} & {b: string} & {c: string}) => any
  8.  */

这道题解答看的github：https://github.com/type-challenges/type-challenges/issues/775

12、UnionPop

得到联合类型中的最后一个类型

  1. type a = 1 | 2 | 3
  2. type b = UnionPop<a>;       // 3

实现：

  1. //将联合类型转成函数类型的交叉 ((arg: "1") => void) & ((arg: "2") => void) & ((arg: "3") => void)
  2. type UnionToIntersectionFn<T> = (T extends any ? (k: (arg: T) => void) => void : never) extends (
  3.     (k: infer I) => void) ? I : never
  5. //函数类型的 intersection 等价于 接口的 call signature 重载
  6. //这里有个TS特性，https://github.com/type-challenges/type-challenges/issues/737#issuecomment-791505468
  7. //如果有必要从重载中输出一种类型，TS会选择重载中的最后一个签名
  8. type UnionPop<U> = UnionToIntersectionFn<U> extends { (a: infer A): void; } ? A : never;

小结：
这个与11题都是利用了协变与逆变。针对于最后这三题的解答可以查看：https://zhuanlan.zhihu.com/p/58704376

13、UnionToTuple

联合类型转换为元组类型

  1. type a = UnionToTuple<1 | 2 | 3>                      // [1,2,3]
  2. type b = UnionToTuple<1 | string | boolean>           // [1,string,boolean]

实现：

  1. type UnionToIntersectionFn<T> = (T extends any ? (k: (arg: T) => void) => void : never) extends (
  2.     (k: infer I) => void) ? I : never
  4. type UnionPop<U> = UnionToIntersectionFn<U> extends { (a: infer A): void; } ? A : never;
  6. type UnionToTuple<T, Last = UnionPop<T>> = [T] extends [never] ? [] : [...UnionToTuple<Exclude<T, Last>>, Last]