타입스크립트의 Utility Types 사용법을 알아두면 유용하게 사용할 수 있습니다.
interface User {
name: string;
age: number;
}
여기 간단하게 생성된 User Interface 가 있습니다. 해당 인터페이스를 사용했을때 해당 객체는 name, age 두 데이터를 모두 갖고 있어야 에러가 발생하지 않습니다. 만약 둘중에 하나의 값만 필요한 경우와 두 값이 모두 필요한 경우가 생긴다면 여러개의 interface 가 필요합니다.
inerface UserOptionalName {
name?: string;
age: number;
}
inerface UserOptionalAge {
name: string;
age?: number;
}
interface UserOptionalAll {
name?: string;
age?: number;
}
동일한 데이터를 갖고 있지만 정의하려는 타입에 따라서 최대 4개까지 별도의 Interface 를 생성해야 할 수도 있습니다. 이럴때
Utility Types 를 활용할 수 있습니다.
Partial<Type> <=> Required<Type>
Partial 과 Required 는 반대되는 유틸리티입니다. Partial 은 Interface 에 정의된 모든 타입을 Optional 형태로 만들어서 정의할 수 있도록 만들어 주고 Required 는 모든 타입을 필수형태로 만들어 줍니다.
해당 유틸리티는 선언한 타입 전체를 대상으로 옵셔널 또는 필수로 정의할 수 있습니다.
Pick<Type, Keys> <=> Omit<Type, Keys>
전체의 타입을 변경하는 유틸리티가 있다면 선택적으로 구성하거나 또는 필요없는 타입을 제거하여 구성하는 유틸리티도 있습니다.
해당 유틸리티는 keys 만으로 구성된 타입을 새롭게 정의하거나 keys 를 제거한 타입으로 구성하여 활용할 수 있도록 해줍니다.
Record<Keys, Type>
Record 는 속성키가 Keys 이고 속성값이 Type인 개체 유형을 생성할 수 있습니다. Record 를 사용하지않고 타입을 정의했을때와 Record 를 사용했을때 활용도를 비교해보도록 하겠습니다.
Record 를 사용했을때가 더 간결하고 유지보수면에서도 좋을것같긴한데 간단한 예제라서 그런지 엄청 다이나믹한 효율성을 보기는 조금 어려운것같습니다.
Exclude<Type, ExcludedUnion> <=> Extract<Type, Union>
Exclude 는 ExcludedUnion 에 할당할 수 있는 Union 멤버를 Type 에서 제외하여 유형을 형성합니다.
Extract 는 반대로 Union 에 할당 가능한 멤버를 Type 에서 추출하여 유형을 형성합니다.
ExcludedUnion 에 정의된 맴버를 제외하고 타입 유형으로 추출할 수 있는걸 확인할 수 있습니다.
이 외에도 기타 유용한 유틸리티들이 공식문서에 잘 나와있으니 꼭 확인해 보시기 바랍니다.
https://www.typescriptlang.org/docs/handbook/utility-types.html
'프론트엔드 > Typescript' 카테고리의 다른 글
Template Literal Types (0) | 2021.11.12 |
---|