유틸리티 타입

14 Jun 2024 in Study / Typescript

타입스크립트 유틸리티 타입

유틸리티 타입이란?

유틸리티 타입 은 이미 정의되어 있는 타입 구조를 변경하여 재사용하고 싶을 때 사용하는 타입이다.

{
  "compilerOptions": {
    "lib": ["ESNext"]
  }
}

lib 속성은 타입스크립트에서 미리 정의해 놓은 타입 선언 파일을 사용할 때 쓰는 옵션이다.

Pick 유틸리티 타입은 특정 타입의 속성을 뽑아서 새로운 타입을 만를어 낼 때 사용한다.

Pick<타입 대상, '대상 타입의 속성 이름'>
Pick<타입 대상, '대상 타입의 속성 이름1' | '대상 타입의 속성 이름2'>

interface IUtility {
  id: string;
  name: string;
  skill: string;
}

type UtilityWithId = Pick<IUtility, 'id'>;

id와 name, skill속성을 갖는 인터페이스를 하나 선언하고 이 인터페이스 id 속성을 뽑아 새로운 타입을 정의했다.

type UtilityWithId = {
  id: string;
}

결과적으로 이 코드처럼 타입 별칭을 정의하는 것과 같다.

Omit 타입은 특정 타입에서 속성 몇 개를 제외한 나머지 속성으로 새로운 타입을 생성할 때 사용하는 유틸리티 타입이다.

Omit<대상 타입, '대상 타입의 속성 이름'>
Omit<대상 타입, '대상 타입의 속성 이름1' | '대상 타입의 속성 이름2'>

interface IUtility {
  id: string;
  name: string;
  skill: string;
}

type UtilityWithId = Omit<IUtility, 'id'>;

id, name, skill 속성을 갖는 인터페이슬ㄹ 하나 선언하고, id 속성을 제외한 나머지 속성들을 Omit 타입으로 새롭게 정의했다.

type UtilityWithId = {
  name: string;
  skill: string;
}

결과적으로 이 코드처럼 타입 별칭을 정의하는 것과 같다.

Partial 타입은 특정 타입의 모든 속성을 모두 옵션 속성으로 변환한 타입을 생성해준다.

Partial<대상 타입>

Partial 타입은 대상 타입만 넘기면 된다.

interface IUtility {
  id: string;
  name: string;
  skill: string;
}

type OptionUtility = partial<IUtility>

속성에 옵션 속성 표시인 ?가 붙어져 있다.

type OptionUtility = {
  id?: string;
  name?: string;
  skill?: string;
}

결과적으로 이 코드처럼 타입 별칭을 정의하는 것과 같다.

Exclude 타입은 특정 타입의 속성을 모두 옵션 속성으로 변경해준다.

Exclude<대상 유니언 타입, '제거할 타입 이름'>
Exclude<대상 유니언 타입, '제거할 타입 이름1' | '제거할 타입 이름2'>

Exclude 타입은 첫 번째 제네릭 타입에 변형할 유니언 타입을 넣고, 두 번째 제네릭 타입으로 제외할 타입 이름은 문자열 타입으로 적거나 문자열 유니언 타입으로 넣어주면 된다.

type Language = "C" | "Java" | "TypeScript" | "React"
type TrueLanguage = Exclude<Language, "React">

type TrueLanguage = "C" | "Java" | "TypeScript"

결과적으로 이 코드처럼 타입 별칭을 정의하는 것과 같다.

Record 타입은 1개를 속성의 키(key)로 받고 다른 타입 1개를 속성 값(value)으로 받아 객체 타입으로 변환해 준다.

Record<객체 속성의 키(key)로  사용할 타입, 객체 속성의 값(value)으로 사용할 타입>

type Language = "C" | "Java" | "TypeScript" | "React"
type RecordLanguage = Record<Language, string>

type RecordLanguage = {
  "C": string;
  "Java": string;
  "TypeScript": string;
  "React": string;
}

결과적으로 이 코드처럼 타입 별칭을 정의하는 것과 같다.