TypeScript: 유틸리티 유형-JS 튜토리얼-php.cn

TypeScript : Utility Types

유틸리티 유형 소개

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

TypeScript에서 ReturnType 및 Awaited 사용

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

1. 함수의 반환 유형 얻기

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

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

function async fooWithAsync() {
const something:string = ""
return something;
} // will return Promise<?>

로그인 후 복사

이 예에서는:

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

ReturnType : foo의 반환 유형인 문자열을 추출합니다.

2. 비동기 함수 처리

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

type MyReturnType = ReturnType<typeof foo>

로그인 후 복사

이 예에서는:

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;

로그인 후 복사

해부하기

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

function async fooWithAsync() {
const something:string = ""
return something;
} // will return Promise<?>

로그인 후 복사

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

결과: ? R : 절대

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

실제예

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

type MyReturnType = ReturnType<typeof foo>

로그인 후 복사

위의 예에서 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라는 유틸리티 유형을 사용하면 됩니다.

Prettify를 입력하세요. = {[T 키의 K]: T[K]};

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

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

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

로그인 후 복사

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

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

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

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

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

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

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

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

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

컴파일 시 이러한 검사를 시행하려면 Assert 유형을 사용하면 됩니다.

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

function async fooWithAsync() {
const something:string = ""
return something;
} // will return Promise<?>

로그인 후 복사

실제 사례

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

type MyReturnType = ReturnType<typeof foo>

로그인 후 복사

결론

Prettify 유틸리티 유형을 사용하면 중첩 유형을 더 읽기 쉽고 관리하기 쉽게 만들 수 있습니다. 교차 유형(&)을 사용하여 유형을 결합하면 작업하기 쉬운 복잡한 구조를 만들 수 있습니다. 또한 IsExact, IsIdentical 및 IsEqual과 같은 유틸리티 유형을 사용하면 병합된 유형이 예상한 것과 정확히 일치하는지 확인하는 데 도움이 됩니다.

TypeScript 유틸리티 유형 사용: 선택, 생략, 읽기 전용 및 부분

TypeScript는 보다 유연하고 재사용 가능한 유형 정의를 만드는 데 도움이 되는 강력한 유틸리티 유형 세트를 제공합니다. 선택, 생략, 읽기 전용, 부분이라는 네 가지 필수 유틸리티 유형을 살펴보겠습니다. 전자상거래 애플리케이션의 실제 사례를 사용하여 이러한 유틸리티가 실제 시나리오에 어떻게 적용될 수 있는지 설명하겠습니다.

이 블로그 게시물 전체에서 사용할 제품 인터페이스부터 시작해 보겠습니다.

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

로그인 후 복사

제품 요약 선택 사용

사용 사례: 제품 목록 페이지에 제품 요약을 표시합니다.

Pick 유틸리티 유형을 사용하면 기존 유형에서 특정 속성을 선택하여 새 유형을 만들 수 있습니다. 이는 속성의 하위 집합만 필요할 때 유용합니다.

예:

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:[]}

로그인 후 복사

제품 양식 생략 사용

사용 사례: 특정 필드가 자동 생성되는 새 제품 추가를 위한 제품 양식 만들기

생략 유틸리티 유형을 사용하면 기존 유형에서 특정 속성을 제외하여 새 유형을 만들 수 있습니다. 이는 특정 상황에서 특정 속성이 필요하지 않을 때 유용합니다.

예:

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

로그인 후 복사

변경 불가능한 제품 세부정보에 읽기 전용 사용

사용 사례: 데이터베이스에서 가져온 후 제품 세부 정보를 수정할 수 없도록 합니다.

읽기 전용 유틸리티 유형은 유형의 모든 속성을 읽기 전용으로 설정합니다. 즉, 설정된 후에는 변경할 수 없습니다. 이는 불변 객체를 생성하는 데 유용합니다.

예:

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

로그인 후 복사

제품 업데이트에 부분 사용

사용 사례: 일부 필드만 변경될 수 있는 제품 세부 정보 업데이트

부분 유틸리티 유형은 유형의 모든 속성을 선택적으로 만듭니다. 이는 모든 속성이 필요하지 않은 객체에 대한 유형을 생성해야 할 때 유용합니다.

예:

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

function async fooWithAsync() {
const something:string = ""
return something;
} // will return Promise<?>

로그인 후 복사

결론

Pick, Omit, Readonly, Partial과 같은 유틸리티 유형은 더 유연하고 재사용 가능한 유형 정의를 만드는 데 도움이 되는 TypeScript의 강력한 도구입니다. 이러한 유틸리티를 이해하고 사용하면 더 깔끔하고 유지 관리하기 쉬운 코드를 작성할 수 있습니다.

자신의 프로젝트에서 이러한 유틸리티 유형을 자유롭게 실험해보고 유형 정의를 어떻게 단순화할 수 있는지 알아보세요!

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