소개

이 기사에서는 TypeScript 유틸리티 유형을 살펴보고 그 중요성을 설명하고 몇 가지 유용한 예제와 사용 사례를 포함합니다.

유틸리티 유형은 기존 유형을 새로 수정된 유형으로 변환transform할 수 있는 기본 제공 유형입니다.


type A가 있고 type B에서 inherit , modify 또는 exclude 속성을 가질 수 있는 새로운 type A를 구성하고 싶다고 가정합니다.

여기서 type B = UtilityType<A, options>는 사용할 유형을 나타내고 UtilityType는 options, inherit 또는 modify 등과 같이 수행할 작업 유형을 설명합니다.

Utility types aren't supported by primitives except strings which offer Intrinsic String Manipulation Types to manipulate strings.

Utility types are usually used with compound types such as Interfaces and Union Types.

시작하기 전에

TypeScriptplayground는 유틸리티 유형을 실험하기에 좋은 곳입니다. 주제에 대한 이해를 확고히 하기 위해 배운 내용을 연습하는 것이 좋습니다.

조합 유형

공용체 유형은 두 개 이상의 다른 유형으로 구성된 유형으로, 해당 유형 중 하나일 수 있는 값을 나타냅니다. 우리는 이러한 각 유형을 노동 조합의 구성원이라고 합니다.

Union 유형은 기본적으로exclude 두 가지 이상의 유형입니다.

공용체는 다음 유틸리티 유형을 지원합니다.

Exclude

Extract

이 예제는 공용체와 함께 유틸리티 유형을 사용하는 방법을 보여줍니다.

Caveat: Union types are case-sensitive.

type ActivityType =
  "Swimming"
  | "Reading"
  | "Coding"
  | "Dancing"
  | "Jogging";

1 - 추출

Union에 할당할 수 있는 모든 공용체 멤버를 Type에서 추출하여 유형을 생성합니다.

구문combine
여기서 Extract<Type, Union>는 초기 유형이고 Type는 추출하려는 항목을 나타냅니다.

데모

type CognitiveActivity = Extract<ActivityType, "Reading" | "Coding">;
// transformed type: "Reading" | "Coding"
const activity: CognitiveActivity = "Reading"; 
console.log(activity);

2 - 제외

ExcludedMembers에 할당할 수 있는 모든 공용체 멤버를 UnionType에서 제외하여 형식을 생성합니다.

구문Union
여기서 Exclude<UnionType, ExcludedMembers>는 초기 유형이고 UnionType는 제외하려는 항목을 나타냅니다.

데모

type PhysicalActivity = Exclude<ActivityType, "Reading" | "Coding">;
 // transformed type: "Swimming" | "Dancing" | "Exercise";
const activity: PhysicalActivity = "Swimming";
console.log(activity);

유형 별칭 및 인터페이스

유형 별칭: 유형 별칭은 모든 유형의 이름입니다.

인터페이스: 인터페이스 선언은 객체 유형의 이름을 지정하는 또 다른 방법입니다.

이 예제는 유형 별명 및 인터페이스와 함께 유틸리티 유형을 사용하는 방법을 보여줍니다.

Intersection types are types that combine properties from two or more types. They're usually used in conjunction with the following utility types.

일반적인 구문은

type A = {

};
type B = A & {
   bKey: string;
}; // includes all the properties in A and B


type ElectronicDevice = {
  name: string;
  USBPorts: USBPORT[];
  screenDimensions: Dimension;
  buttons: Buttons[];
  wifiConnectivity: boolean;
  manufacturer: string;
  memory: number;
}

이 유형은 전자 장치의 속성을 나타냅니다. 전자 장치는 모양과 크기가 다양하지만 버튼, 메모리, 포트 등과 같은 많은 핵심 기능을 공유합니다.

이 TypeScript에서 이 예제의 유형을 테스트할 수 있습니다playground.

1 - 선택

구문ExcludedMembers
Type에서 속성 키(문자열 리터럴 또는 문자열 리터럴의 합집합) 집합을 선택하여 유형을 생성합니다.

데모

type Calculator = Pick<ElectronicDevice, "name" | "buttons"> & {
  type: CalculatorType;
  // own types
}

2 - 기록

구문Pick<Type, Keys>
속성 키가 Keys이고 속성 값이 Type인 객체 유형을 생성합니다. 이 유틸리티는 유형의 속성을 다른 유형에 매핑하는 데 사용할 수 있습니다.

데모

type DeviceType = "Analogue" | "Digital";

type SmartPhone = Record<DeviceType, ElectronicDevice> & {
  type: CalculatorType;
  // own types
}

const blackberry: SmartPhone = {
    Digital: {

    }
}

3 - 생략

구문Record<Keys, Type>
유형에서 모든 속성을 선택한 다음 키(문자열 리터럴 또는 문자열 리터럴의 합집합)를 제거하여 유형을 구성합니다.

데모

type StopWatch = Omit<ElectronicDevice, "wifiConnectivity" | "USBPorts">;

4 - 반환 유형

구문Omit<Type, Keys>
함수 Type의 반환 유형으로 구성된 유형을 구성합니다.

데모

const getUserByActivity = async (type: string) => {
  const response = await apiCall(url, params); // fake api call
  return response.data;
}
type NewUser = ReturnType<typeof getUserByActivity>
const user: NewUser = getUserByActivity(activity.type);

참조:

TypeScript Utility Types