TypeScript의 한계를 뛰어넘다

저는 종종 TypeScript에 얽매이고 그럴 때면 Mac을 창 밖으로 던져버리고 싶습니다. 그래서 저는 여러분과 제가 더 나은 코드를 작성하는 데 도움을 드리고자 이 글을 작성했습니다. 새롭고 유용한 TypeScript 핵을 우연히 발견했을 때 이 게시물을 업데이트할 것입니다. 그동안 영감을 얻어 나만의 멋진 TS 마술을 만들거나 코드를 훔쳐보세요. 판단하지 않겠습니다... 😜

배열의 첫 번째 인덱스

배열에서 첫 번째 인덱스의 유형을 얻고 싶을 수 있으며, 그렇다면 이 유틸리티 유형이 적합합니다.

type First<T extends any[]> = T extends [infer P, ...any[]] ? P : never;

배열의 첫 번째 인덱스 유형을 유추하는 데 도움이 되는 다소 간단한 유틸리티 유형입니다.

type Test1 = First<[() => string, "a", "b"]>;
//   ^ Test1: () => string

type Test2 = First<[undefined, 4]>;
//   ^ Test2: undefined

type Test3 = First<[]>;
//   ^ Test3: never

보너스로 튜플의 마지막 요소를 얻으려면 [infer P, ...any[]]를 [...any[], infer P]로 변경하세요!

튜플 유형의 변수를 사용하려면 대괄호 표기법을 사용하여 다음과 같이 배열의 첫 번째 요소에 액세스하는 것이 좋습니다. T[0] .

type First<T extends readonly any[]> = T[0];

그런 다음 typeof 튜플을 전달합니다.

const numbers = [1, 2, 3, 4, 5] as const;

type Test = First<typeof numbers>;
//   ^ Test: () => 1

참고: as const 를 사용하여 배열을 const로 캐스팅하는 것을 기억하세요. 그러면 TypeScript는 배열을 readonly [1, 2, 3, 4, 5] 로 추론합니다.

map() 사용 시 각 요소의 타입 유추

모음 배열 또는 string[]가 있다고 가정해 보겠습니다. 이제 Array.map() 를 사용하여 배열을 반복하고 싶다고 가정해 보겠습니다. 당신은 다음과 같은 것을 가질 것입니다 :

const vowels = ["a", "e", "i", "o", "u"];

vowels.map((v: string) => {});
//          ^ v: string

쉽지만 잘 사용되지 않는 접근 방식은 as const 를 사용하여 배열을 튜플로 캐스트하는 것입니다. 그렇게 하면 Array.map()가 Array.map()에서 얻을 수 있는 가능한 값을 반환할 수 있습니다. 이제 코드는 다음과 같아야 합니다.

const vowels = ["a", "e", "i", "o", "u"] as const;

vowels.map((v) => {});
//          ^ v: "a" | "e" | "i" | "o" | "u"

그러나 어레이를 const로 캐스팅하면 단점이 있습니다. 이후에는 변경할 수 없습니다. 즉, 더 이상 Array.push() , Array.pop() 등을 의미하지 않습니다.

튜플의 길이 얻기

TypeScript는 요소의 프로토타입에 액세스할 수 있게 해주기 때문에 정말 영리합니다. 따라서 Array.length를 사용하는 일반 JS 대신 TS 유형에 any[]['length]를 사용하여 길이에 액세스할 수 있습니다. 그리고 그 배열이 튜플로 판명되면 TS는 길이를 직접 유추할 수 있습니다!

type Length<T extends readonly any[]> = T["length"];

그것을 사용하는 것은 간단합니다. 튜플을 유형에 직접 전달하거나…

type Test1 = Length<["a", "b", "c"]>;
//   ^ Test1: 3

또는 보다 실용적인 접근 방식은 튜플 유형의 변수를 전달하는 것입니다…

const letters = ["a", "b", "c"] as const;

type Test2 = Length<typeof letters>;
//   ^ Test2: 3

알림: 위의 방법은 튜플 유형의 변수에만 작동하므로 불행히도 배열은 작동하지 않습니다…

결론

그게 다야! 이것이 누군가를 도왔기를 바랍니다. 다른 멋진 TS 트릭을 우연히 발견하면 이 게시물을 업데이트할 것입니다. 그 동안 this post about Bun을 확인하실 수 있습니다. 읽을 가치가 있습니다. 약속합니다.

읽어주셔서 감사합니다 😊