【Typescript 系列】类型体操之中等篇题型(第二十节)解读

98 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第9天,点击查看活动详情

1. 引言

接着上一节中,接下来我们继续Ts中等篇的题型练习 https://github.com/type-challenges/type-challenges/blob/main/README.zh-CN.md 提供的TypeScript 类型体操姿势合集题型,目的是为了让大家更好的了解TS的类型系统,编写自己的类型工具,或者单纯的享受挑战的乐趣!

2. 题型

  1. Construct Tuple:构造一个给定长度的元组。
type result = ConstructTuple<2> // expect to be [unknown, unkonwn]

思路:    首先,我们需要先了解到在Typescript 中递归是有上限的,它的最大上限是1000 次,如果入参到了1000 就会挂掉,所以我们看demo4 中已经到达上限值,所以我们不能用单纯的如下操作实现:

type ConstructTuple<L extends number, U extends unknown[] = []> = 
  U['length'] extends L
    ? U
    : ConstructTuple<L, [...U, unknown]>

加入上限值这个考虑后,我们可以把该自定义类型变为如下:

解答:


type ConstructTuple<L extends number, Result extends any[] = []> = Equal<
  L,
  Result["length"]
> extends true
  ? Result
  : ConstructTuple<L, [...Result, unknown]>;

type Demo = ConstructTuple<0>; // type Demo = []
type Demo2 = ConstructTuple<2>; // type Demo2 = [unknown, unknown]
type Demo3 = ConstructTuple<999>['length']; // type Demo3 = 999
type Demo4 = ConstructTuple<1000>['length']; // type Demo4 = 1000
  1. Number Range: 有时我们想要限制数字的范围……为例子。
type result = NumberRange<2 , 9> //  | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 

思路:    首先,我们需要一个Count数组用来计数,Res 用来存储返回值,Flag 标志可以开始插入的点;我们开始根据 Flag 来判断是否开始插入 Res,如果不可以就说明还没到开始的点,继续计数,一旦开始插入,最终的结果就是在Count数组 达到 H 的位置时候返回。也就是说Count['length'] extends H 判断是否结束;使用 NumberRange<L, H, [...Count, ''], [...Res, Count['length']], Flag> 不断的自增构造数组,最后要返回的是联合类型,我们只需要使用 [number] 转一下即可。结束,完成。 解答:


type NumberRange<L, H, Count extends any[] = [], Res extends any[] = [] , Flag extends boolean = Count['length'] extends L ? true : false> = 
  Flag extends true
    ? Count['length'] extends H
      ? [...Res, Count['length']][number]
      : NumberRange<L, H, [...Count, ''], [...Res,  Count['length']], Flag>
    : NumberRange<L, H, [...Count, '']>
    
    
type Result1 = | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
type Result2 = | 0 | 1 | 2
type Result3 =
  | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
  | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20
  | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30
  | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40
  | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50
  | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60
  | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70
  | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80
  | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90
  | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100
  | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110
  | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120
  | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130
  | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140
  
type Demo = NumberRange<2, 9>; // type Demo = Result1
type Demo2 = NumberRange<0, 2>; // type Demo2 = Result2
type Demo3 = NumberRange<0, 140>; // type Demo3 = Result3