정적 유형의 JavaScript 상위 집합인 TypeScript는 오류를 조기에 포착하고 코드 가독성을 향상시키는 능력으로 인해 기술 커뮤니티에서 큰 인기를 얻었습니다. TypeScript의 강력한 기능 중 하나는 개발자가 보다 표현력 있고 동적인 유형을 작성할 수 있도록 하는 추론 키워드입니다.
TypeScript 2.8에 도입된 infer 키워드는 조건부 유형 내에서 임시 유형 변수를 생성하는 데 사용됩니다. 그런 다음 이러한 유형 변수를 사용하여 조건부 유형의 참 또는 거짓 분기 내에서 유형을 유추할 수 있습니다. infer 키워드를 사용하면 TypeScript가 사용되는 컨텍스트에 따라 특정 유형을 결정할 수 있으므로 개발자는 더욱 동적이고 표현력이 풍부한 유형을 작성할 수 있습니다.
추론이 어떻게 작동하는지 더 잘 이해하기 위해 조건부 유형의 기본 구문을 살펴보겠습니다.
type MyConditionalType<T> = T extends SomeType ? TrueType : FalseType;
이 예에서 T는 일반 유형 매개변수이고 SomeType은 T가 비교되는 유형을 나타냅니다. T가 SomeType을 확장하는 경우 MyConditionalType
이제 믹스에 추론 키워드를 도입해 보겠습니다.
type MyInferredType<T> = T extends SomeType<infer U> ? U : FalseType;
여기에서는 infer 키워드를 사용하여 조건부 유형의 실제 분기 내에 임시 유형 변수 U를 생성합니다. T가 SomeType을 확장하는 경우 TypeScript는 T 유형을 기반으로 U 유형을 추론하려고 시도합니다.
ReturnType은 함수의 반환 유형을 추출하는 유틸리티 유형입니다. 이는 infer 키워드를 사용하여 동적 유형을 생성하는 방법에 대한 완벽한 예입니다. ReturnType의 정의는 다음과 같습니다.
type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;
이 정의에서 T는 임의 개수의 인수를 취하고 임의 유형을 반환하는 함수 유형입니다. infer 키워드를 사용하여 함수의 반환 유형을 나타내는 임시 유형 변수 R을 만듭니다. T가 함수인 경우 TypeScript는 반환 유형을 추론하여 R에 할당합니다.
ReturnType이 실제로 작동하는 모습을 살펴보겠습니다.
function greet(name: string): string {
return `Hello, ${name}!`;
}
type GreetReturnType = ReturnType<typeof greet>; // GreetReturnType is inferred as 'string'
여기서 ReturnType은 Greeting 함수의 반환 타입인 문자열을 유추하는데 사용됩니다.
infer 키워드를 활용하는 또 다른 유용한 유틸리티 유형은 매개변수입니다. 이 유형은 함수의 매개변수 유형을 튜플로 추출합니다. Parameter의 정의는 다음과 같습니다.
type Parameters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : never;
이 예에서는 함수의 매개변수 유형을 나타내기 위해 임시 유형 변수 P를 생성합니다. T가 함수인 경우 TypeScript는 매개변수 유형을 추론하여 P에 튜플로 할당합니다.
매개변수를 사용한 예를 살펴보겠습니다.
function add(a: number, b: number): number {
return a + b;
}
type AddParameters = Parameters<typeof add>; // AddParameters is inferred as [number, number]
여기서 Parameter는 튜플 [숫자, 숫자]인 add 함수의 매개변수 유형을 유추하는 데 사용됩니다.
PromiseType 유틸리티 유형을 사용하면 Promise가 해결하는 유형을 추출할 수 있습니다. 이는 비동기 함수를 처리할 때 특히 유용합니다. PromiseType의 정의는 다음과 같습니다.
type PromiseType<T extends Promise<any>> = T extends Promise<infer U> ? U : never;
이 예에서는 Promise가 해결하는 유형을 나타내는 임시 유형 변수 U를 만듭니다. T가 Promise인 경우 TypeScript는 해결된 유형을 추론하여 U에 할당합니다. 예는 다음과 같습니다.
async function fetchData(): Promise<string> {
return "Fetched data";
}
type FetchedDataType = PromiseType<ReturnType<typeof fetchData>>; // FetchedDataType is inferred as 'string'
이 경우 PromiseType을 사용하여 fetchData 함수의 Promise가 해결되는 유형인 문자열을 유추합니다.
UnboxArray 유틸리티 유형을 사용하여 배열 내의 요소 유형을 추출할 수 있습니다. UnboxArray의 정의는 다음과 같습니다.
type UnboxArray<T extends Array<any>> = T extends Array<infer U> ? U : never;
이 예에서는 임시 유형 변수 U를 생성하여 배열 내의 요소 유형을 나타냅니다. T가 배열인 경우 TypeScript는 요소 유형을 추론하여 U에 할당합니다. 예를 들면 다음과 같습니다.
type MyArray = number[]; type ElementType = UnboxArray<MyArray>; // ElementType is inferred as 'number'
여기서 UnboxArray는 MyArray 유형 내의 요소 유형인 숫자를 추론하는 데 사용됩니다.
추론 키워드는 매우 강력하지만 몇 가지 제한 사항이 있습니다.
조건부 유형 내에서만 사용할 수 있습니다.
특히 복잡하거나 재귀적인 유형을 처리할 때 TypeScript가 올바른 유형을 추론하는 것이 항상 가능한 것은 아닙니다. 이러한 경우 개발자는 TypeScript가 올바른 유형을 추론할 수 있도록 추가 유형 주석을 제공하거나 유형을 리팩터링해야 할 수 있습니다.
추론의 힘을 이해하고 활용하면 더욱 유연한 TypeScript 프로젝트를 만들 수 있습니다. 지금부터 추론 키워드를 툴킷에 통합하는 것을 고려해 보세요.
이 내용이 도움이 되었다면 제 뉴스레터를 구독 웹 개발에 대한 더 유용한 기사와 도구를 받아보세요. 읽어주셔서 감사합니다!
위 내용은 TypeScript의 추론 키워드 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
