TS能够通过一些逻辑语法去提取我们想要的类型和结果、在此之前我们需要先了解 infer(局部变量）和 extends ? : 类似JS的三元算符后面的案例中我们讲大量使用它！

Promsie

  1. type p = Promise<'gf'>
  2. type getValueType = p extends Promise<infer Value> ? Value : never;
  3. /* 
  4.   通过 infer 声明一个局部变量 Value 来保存，如果匹配，就返回匹配到的 Value，
  5.   否则就返回 never 代表没匹配到
  6. */

Array

  1. type arr = [1,2,3]
  2. // 提取arr第一个元素的类型
  3. type GetFirst<Arr extends number[]> = Arr extends [infer First, ...number[]] ? First : never;
  4. type res = GetFirst<arr> // [1]
  6. // 提取最后一个
  7. type GetLast<Arr extends number[]> = Arr extends [ ...number[], infer Last] ? Last : never;
  8. type res1 = GetLast<arr> // [3]
  10. // 提取剩下的
  11. type PopArr <Arr extends number[]> = Arr extends [ ...infer Rest, number] ? Rest : never;
  12. type res2 = PopArr<arr> // [1,2]

String

  1. type str = 'guang2222fa';
  3. // 匹配字符串是不是以xxx开头
  4. type StartWith<Str extends string, Prefix extends string> = 
  5.   Str extends `${Prefix}${string}` ? true : false;
  6. type res = StartWith<str, 'g'> // true
  7. type res1 = StartWith<str, 'h'> // false
  9. /* 
  10.   解释： 
  11.     接收两个参数 Str强制匹配为string类型、Prefix前缀，${string}是指任意的string、
  12. */
  14. // 字符串替换
  16. type ReplaceStr<Str extends string, Substr extends string, Replacement extends string> = 
  17.      Str extends `${infer Prefix}${Substr}${infer Suffix}` 
  18.        ? `${Prefix}${Replacement}${Suffix}` : Str;
  19. type res2 = ReplaceStr<str, '2222', '&&&'>  //"guang&&&fa"
  21. // Trim去除空格(利用递归一个一个去找）
  22. type TrimLeft<Str extends string> = 
  23.   Str extends `${' ' | '\n' | '\t'}${infer Rest}`
  24.   ? TrimLeft<Rest>
  25.   : Str;
  26. type res3 = TrimLeft<" gf"> //gf
  27. // right
  28. type TrimStrRight<Str extends string> = 
  29.     Str extends `${infer Rest}${' ' | '\n' | '\t'}` 
  30.         ? TrimStrRight<Rest> : Str;
  31. type res4 = TrimStrRight<'gf '>
  32. // 组合Trim
  33. type TrimStr<Str extends string> =TrimStrRight<TrimStrLeft<Str>>;
  34. type res5 = TrimStr<' gf '> // gf

Function

  1. // 提取参数
  2. type GetParams<Func extends Function> = 
  3.   Func extends (...args:infer Params) => unknown
  4.     ? Params : never;
  5. type ParamsResult = GetParams<(name:string, age:number) => string> // [name: string, age: number]
  7. // 返回类型
  8. type GetReturnType<Func extends Function> = 
  9.   Func extends (...args: unknown[]) => infer ReturnType 
  10.     ? ReturnType : never;
  11. type ReturnTypeResult = GetReturnType<() => 'gf'> // gf

Class

  1. class Gf {
  2.     name: string;
  4.     constructor() {
  5.         this.name = "gf";
  6.     }
  8.     hello() {
  9.         return 'hello, I\'m ' + this.name;
  10.     }
  11. }
  13. const gf = new Gf();
  14. gf.hello();
  16. // 方法也可以使用call 或者bind 、apply
  17. gf.hello.call({name:'111'}) // 但这里却没有被检查出来 this 指向的错误。
  20. // 修改
  21. class Gf {
  22.     name: string;
  23.     constructor() {
  24.         this.name = "gf";
  25.     }
  26.     // 需注意，这里的 this 经过 ts 编译后会消失
  27.     hello(this: Gf) {
  28.         return 'hello, I\'m ' + this.name;
  29.     }
  30. }
  31. // 这样就能检测出有问题的this、这里的this还能够提取出来
  32. type GetThisParameterType<T> = 
  33.   T extends (this: infer ThisType, ...args:any[]) => any
  34.     ? ThisType
  35.     : unknown;

总结

类型的提取是TS类型计算的一个基础、学习不同类型的提取套路、在结合后面的学习、我们就能更加灵活的编写TS的逻辑类型计算！