TS并没有循环、所以在我们不确定数组个数、字符串长度的情况下、对象层数不确定,这个时候我们可以选择递归的方式去代替循环、下面学习下递归的案例!

Promise

  1. type p = Promise<Promise<Promise<Record<string,any>>>>;
  2. type GetPromiseValueType<P extends Promise<unknown>> =
  3. P extends Promise<infer ValueType>
  4. ? ValueType extends Promise<unknown>
  5. ? GetPromiseValueType<ValueType>
  6. : ValueType
  7. : never;
  8. type res = GetPromiseValueType<p>

Array

  1. // 数组反转
  2. type arr = [1,2,3,4,5];
  3. type ArrReverse<Arr extends unknown[], Value extends [] = []> =
  4. Arr extends [infer First, ...infer Rest]
  5. ? [...ArrReverse<Rest>, First]
  6. : Arr
  7. type res = ArrReverse<arr> // [5, 4, 3, 2, 1]
  8. // remove
  9. type arr1 = [1,2,3,4,5];
  10. type RemoveItem<Arr extends unknown[], Item> =
  11. Arr extends [infer First, ...infer Rest]
  12. ? First extends Item
  13. ? RemoveItem<Rest, Item>
  14. : [First, ...RemoveItem<Rest, Item> ]
  15. : Arr
  16. type removeArr = RemoveItem<arr1, 5> // [1, 2, 3, 4]
  17. // 传入数组长度和每个value的值、得到一个完整的数组
  18. type CreateArr<Length extends number, Ele, Arr extends unknown[] = []> =
  19. Arr['length'] extends Length
  20. ? Arr
  21. : CreateArr<Length, Ele, [...Arr, Ele]>
  22. type res = CreateArr<5,'test'> // ["test", "test", "test", "test", "test"]

String

  1. type replaceAll<Str extends string, Elm, Join extends string = ''> =
  2. Str extends `${infer First}${infer Rest}`
  3. ? First extends Elm
  4. ? replaceAll<Rest, Elm, `${Join}`>
  5. : `${First}${replaceAll<Rest, Elm, Join>}`
  6. : Str;
  7. type res = replaceAll<'hhhhunang','h'> // unang
  8. // 字符串反转
  9. type reverseStr<Str extends string> =
  10. Str extends `${infer First}${infer Rest}`
  11. ? `${reverseStr<Rest>}${First}`
  12. : Str;
  13. type reverseRes = reverseStr<'huang'> // "gnauh"

映射类型

  1. type DeepReadonly<Obj extends Record<string, any>> = {
  2. readonly [Key in keyof Obj]:
  3. Obj[Key] extends object
  4. ? Obj[Key] extends Function
  5. ? Obj[Key]
  6. : DeepReadonly<Obj[Key]>
  7. : Obj[Key];
  8. }
  9. type obj = {
  10. name:'zhangsan',
  11. a:{
  12. age:18,
  13. b:{
  14. aa:"s",
  15. getAge:() =>{}
  16. }
  17. },
  18. getName:() =>{
  19. }
  20. }
  21. type res = DeepReadonly<obj>
  22. type res1 = DeepReadonly<obj>['a']

总结

递归可以帮助我们在不确认长度和层数的时候达到循环遍历做逻辑判断!