프론트엔드/Typescript

Utility Tyes - Typescript

.log('FE') 2021. 12. 7. 19:40
728x90
반응형

타입스크립트의 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>

PartialRequired 는 반대되는 유틸리티입니다. PartialInterface 에 정의된 모든 타입을 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>

ExcludeExcludedUnion 에 할당할 수 있는 Union 멤버를 Type 에서 제외하여 유형을 형성합니다.

Extract 는 반대로 Union 에 할당 가능한 멤버를 Type 에서 추출하여 유형을 형성합니다.

 

ExcludedUnion 에 정의된 맴버를 제외하고 타입 유형으로 추출할 수 있는걸 확인할 수 있습니다.

 

 

이 외에도 기타 유용한 유틸리티들이 공식문서에 잘 나와있으니 꼭 확인해 보시기 바랍니다.

https://www.typescriptlang.org/docs/handbook/utility-types.html

728x90
반응형

'프론트엔드 > Typescript' 카테고리의 다른 글

Template Literal Types  (0) 2021.11.12