고급 Typescript 유형 분석!

소개

안녕하세요. TypeScript의 일부 고급 유형 분석에 대한 제 게시물에 오신 것을 환영합니다!

이 예제에는 숫자 "12"문자열을 수신하고 12를 제공하는 Type이 있습니다.

type Twelve = StringToNumber<"12"> // 12

암호

type StringToNumber<
  Len extends string,
  Arr extends unknown[] = []
> = `${Len}` extends `${Arr["length"]}`
  ? Arr["length"]
  : StringToNumber<Len, [...Arr, unknown]>;

type One = StringToNumber<"1"> // 1

그래서 우리가 방금 읽었습니까? 음, 이것은 문자열을 취하는 유형이고 그 출력은 숫자로 구문 분석된 문자열입니다.

그래서 우리가 가지고 있다고 가정 해 봅시다 :

type One = StringToNumber<"1"> // 1

// 1st time this type is used by `type One = StringToNumber<"1">`
type StringToNumber<
  Len extends string, // The string we are passing "1". It is a generic that we restrict to 'string' using the 'extends' keyword.
  Arr extends unknown[] = [] // Another generic, in this case an array of unknown which by default is an empty array.
> = `${Len}` extends `${Arr["length"]}` // Is the template literal `1` == `[].length` ? At the start, the Arr is an empty array, so the length is 0. So 1 extends 0 is false. Think about extends in this case as '==' .
  ? Arr["length"] // If so, we return the length of the array.
  : StringToNumber<Len, [...Arr, unknown]>; // Else, we call again (recursive) the StringToNumber type and we pass the 2 generic types: Len="1" and the Arr which at the moment is [unknown], since [...Arr, unknown] becomes [unknown] due to spreading Arr which is an empty array.

// The 2nd iteration, called by the recursivity from the previous statement.
type StringToNumber<
  Len extends string, // The string we are passing "1" (again)
  Arr extends unknown[] = [] // Now we are actually passing an array, which at the moment is [unknown] of length 1.
> = `${Len}` extends `${Arr["length"]}` // `1` == [unknown].length ? Now this is true, because Arr.length is 1
  ? Arr["length"] // Now, we return the length of the array, which is 1
  : StringToNumber<Len, [...Arr, unknown]>; 

결론

Typescript 복합 유형은 때때로 읽기 어려울 수 있습니다. 의심의 여지가 없지만 단계별로 분류하면 다소 명확해질 수 있습니다.

다음에서 나를 팔로우할 수 있습니다.

Github