TypeScript : 유틸리티 유틸리티 유형

유틸리티 유형 소개

TypeScript의 유틸리티 유형을 사용하면 속성을 포함, 제외 또는 수정하여 기존 유형을 새로운 유형으로 변환할 수 있습니다. 이는 코드를 중복하지 않고 특정 사용 사례에 맞는 유형 정의를 생성해야 할 때 매우 유용할 수 있습니다.

TypeScript에서 ReturnType 및 Awaited 사용

TypeScript로 작업할 때 함수의 반환 유형을 결정해야 하는 경우가 종종 있습니다. TypeScript는 이러한 목적으로 ReturnType이라는 편리한 유틸리티 유형을 제공합니다. 비동기 기능 처리를 포함하여 사용 방법을 살펴보겠습니다.

1. 함수의 반환 유형 얻기

함수의 반환 유형을 얻으려면 ReturnType 유틸리티 유형을 사용할 수 있습니다. 예는 다음과 같습니다.

function foo() {
const something:string = ""
return something;
}

function async fooWithAsync() {
const something:string = ""
return something;
}

// Promise를 반환합니다.

이 예에서는

foo 함수는 문자열을 반환합니다.

ReturnType은 foo의 반환 유형인 문자열을 추출합니다.
2. 비동기 함수 처리

비동기 함수를 처리할 때 반환 유형은 Promise입니다. 예는 다음과 같습니다.

MyReturnType = ReturnType 유형

이 예에서는

fooWithAsync 함수는 문자열로 확인되는 Promise를 반환합니다.

ReturnType은 Promise인 반환 유형을 추출합니다.

3. 비동기 함수에 대해 Waited 사용

비동기 함수에서 반환된 Promise의 해결 유형을 얻으려면 Awaited 유틸리티 유형을 사용할 수 있습니다. 방법은 다음과 같습니다.

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

이 예에서는

ReturnType은 약속을 제공합니다.

기다림> Promise를 기본 유형인 문자열로 확인합니다.

요약:

ReturnType: 함수의 반환 유형을 추출합니다.
대기: Promise 유형을 확인합니다.

export const getEvents = async (user: User): Promise<ApiResponse> => {
const eventsApiUrl: string = `${PROMOS_END_POINTS.EVENTS}`;
const apiInstance: AxiosInstance = getAxiosInstance(user, API_SERVICES.PROMOTIONS);
const response: AxiosResponse = await apiInstance.get(eventsApiUrl);
return response.data;
};

type OfferEvent = Awaited<ReturnType<typeof getEvents>>;

const initEvent:OfferEvent = {event:[]}

이러한 유틸리티 유형을 결합하면 TypeScript에서 동기 및 비동기 함수의 반환 유형을 효과적으로 결정할 수 있습니다.

*TypeScript에서 조건부 유형으로 반환 유형 추출
*
TypeScript에서는 조건부 유형과 유형 추론을 사용하여 함수 유형에서 반환 유형을 동적으로 추출할 수 있습니다. 이는 유연하고 재사용 가능한 유형 유틸리티를 만드는 데 특히 유용합니다. 이것이 MyReturnTypeWithCondition 유형 별칭과 어떻게 작동하는지 살펴보겠습니다.

type MyReturnTypeWithCondition<T> = T extends (...args: any[]) => infer R ? R : never;

해부하기

Conditional Check: T extends (...args: any[]) => infer R

T가 함수 유형인지 확인하는 부분입니다.
...args: any[] 구문은 모든 함수 서명과 일치합니다.
infer R 키워드는 함수의 반환 유형을 유형 변수 R로 캡처합니다.

결과: ? R : 절대

T가 함수 유형인 경우 유형 별칭은 함수의 반환 유형인 R로 확인됩니다.
T가 함수 유형이 아닌 경우 never로 결정됩니다.
실제 사례

이를 실제로 보려면 다음 예를 고려하세요.

function foo() {
const something:string = ""
return something;
}

function async fooWithAsync() {
const something:string = ""
return something;
}

위의 예에서 ReturnType은 부울이 됩니다.
예제 함수는 부울을 반환하는 함수 유형입니다. 함수가 아닌 유형을 사용하는 경우 ReturnType은 never가 됩니다.

이 접근 방식을 사용하면 구조를 기반으로 유형을 추론하고 조작할 수 있는 적응성이 뛰어난 유형 유틸리티를 만들 수 있습니다. 이는 유형 안전성과 코드 유지 관리성을 향상시키는 TypeScript의 강력한 기능입니다.

TypeScript에서 유형 결합 및 예쁘게

TypeScript로 작업할 때 더 복잡한 구조를 만들기 위해 여러 유형이나 인터페이스를 결합해야 하는 경우가 많습니다. 이로 인해 때로는 읽고 관리하기 어려운 유형이 발생할 수 있습니다. 이 문서에서는 두 가지 유형을 결합하는 방법, 중첩된 유형을 더 예쁘게 만드는 방법, 병합된 유형이 동일한지 확인하는 방법을 살펴봅니다.

1. 두 가지 유형을 결합

TypeScript에서 두 가지 유형을 결합하는 것은 일반적인 작업입니다. 교차 유형(&)을 사용하여 이를 달성할 수 있습니다. OfferSummaryWithoutConfig와 OfferTypeConfiguration의 두 가지 인터페이스가 있고 이를 결합하려고 한다고 가정해 보겠습니다.

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

교차 유형(&)을 사용하여 이 두 인터페이스를 결합할 수 있습니다.

export const getEvents = async (user: User): Promise<ApiResponse> => {
const eventsApiUrl: string = `${PROMOS_END_POINTS.EVENTS}`;
const apiInstance: AxiosInstance = getAxiosInstance(user, API_SERVICES.PROMOTIONS);
const response: AxiosResponse = await apiInstance.get(eventsApiUrl);
return response.data;
};

type OfferEvent = Awaited<ReturnType<typeof getEvents>>;

const initEvent:OfferEvent = {event:[]}

이렇게 하면 OfferSummaryWithoutConfig 및 OfferTypeConfiguration의 모든 속성을 포함하는 새로운 유형이 생성됩니다.

2. 중첩 유형 예쁘게 만들기

유형을 병합하면 결과 유형이 때로는 지저분해 보이고 읽기 어려울 수 있습니다. 이러한 유형을 더 읽기 쉽게 만들려면 Prettify라는 유틸리티 유형을 사용하면 됩니다.

type MyReturnTypeWithCondition<T> = T extends (...args: any[]) => infer R ? R : never;

이 유틸리티 유형은 T 유형의 키를 반복하고 재구성하여 유형 정의를 더 깔끔하고 읽기 쉽게 만듭니다.

유형을 결합한 후 Prettify 유틸리티 유형을 사용하여 결과 유형을 정리할 수 있습니다

Conditional Check: T extends (...args: any[]) => infer R

3. 병합된 유형이 동일한지 확인하기

병합된 유형이 예상한 것과 정확히 일치하는지 확인하려면 유틸리티 유형을 사용하여 두 유형이 동일한지, 정확한지 또는 동일한지 확인할 수 있습니다.

IsExact: 두 유형이 정확히 동일한지 확인합니다.

type ExampleFunction = (x: number, y: string) => boolean;
type ReturnType = MyReturnTypeWithCondition<ExampleFunction>; 
// ReturnType will be boolean

IsIdentical: 조건부 유형을 사용하여 두 유형을 비교합니다.

IsIdentical를 입력하세요. = T는 U를 확장합니까? (U 확장 T ? true : false) : false;

IsEqual: 두 유형 모두 동일한 키를 갖도록 보장합니다.

export interface OfferSummaryWithoutConfig {
  id: string;
  auditInfo: AuditInfo;
  offerBasicInfo: OfferBasicInfo;
  metaData: MetaData;
  conditionGroupsSummary: ConditionGroupsSummary[];
  rewardGroupsSummary: RewardGroupsSummary[];
  userOperations: ActionPermission;
}

export interface OfferTypeConfiguration {
  id: number;
  name: string;
  description: string;
  configuration: Configuration;
}

이러한 유틸리티 유형을 사용하여 CombinedType이 다른 유형 OfferSummary와 동일하거나 정확하거나 같은지 확인할 수 있습니다.

type CombinedType = OfferSummaryWithoutConfig & {
  offerTypeConfiguration: OfferTypeConfiguration;
};

실제 사례

실제 예를 들어 정리해 보겠습니다.

type Prettify<T> = {

};

위 내용은 TypeScript : 유틸리티 유틸리티 유형의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!