[Typescript] 맵드 타입

Main·2023년 10월 17일
0

TypeScript

목록 보기
8/8
post-thumbnail

맵드 타입(mapped type)이란?

맵드 타입(mapped type)은 이미 정의된 타입을 가지고 새로운 타입을 생성할 때 사용하는 타입 문법입니다.
유틸리티 타입 또한 맵드 타입을 이용하여 구현된 타입입니다.
맵드 타입을 이용하면 나만의 유틸리티 타입을 구현할 수 있습니다.


맵드 타입 예시 코드

in 연산자는 자바스크립트의 for in와 비슷한 기능을 하게되며, key를 순회합니다.
keyof 연산자는 특정 타입의 키 값을 문자열 유니언 타입으로 반환하는 역할을 합니다.

아래 코드에서는 Profile 인터페이스의 속성 타입을 boolean으로 바꾸어 새로운 타입인 ProfileCheck라는 타입을 만든 코드입니다.
Profile 인터페이스에서 키 값을 문자열로 반환하고 반환한 유니언 타입 문자열("name" | "skill")을 순회하며 boolean 타입을 가진 객체의 키 값으로 정의됩니다.

interface Profile {
  name: string;
  skill: string;
}

type ProfileCheck {
  [K in keyof Profile]: boolean;
}
/**
type ProfileCheck {
   name: boolean;
  skill: boolean;
}
**/

맵드 타입 사용시 참고 사항

1. 인덱스 시그니처 문법 안에서 사용하는 in 연산자 앞의 타입 이름은 개발자가 원하는 대로 지을 수 있습니다,

2. 맵드 타입의 대상이 되는 타입 유형은 string, number, symbol 타입으로 선언할 수 있고, boolean 타입으로는 선언할 수 없습니다. boolean은 객체 타입의 키 부분으로는 사용할 수 없기 때문입니다.


매핑 수정자(mapping modifier)

매핑 수정자(mapping modifier)는 맵드 타입으로 타입을 변활할 때 속성 성질을 변환할 수 있도록 도와주는 문법입니다. 매핑 수정자는 +, -, ?, readonly 등이 있습니다.

  • ? : ? 매핑 수정자는 속성을 모두 옵션 속성으로 바꿔주는 역할을 합니다.
  • readonly : readonly 매핑 수정자는 속성을 읽기 전용 속성으로 바꿔주는 역할을 합니다.
  • - : - 매핑 수정자는 ?, readonly 등 일반 속성 이외에 추가된 성질을 모두 제거해 주는 역할을 합니다.

매핑 연산자를 이용하여 옵셔널, readonly 속성 생성

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

type ProfileOptional = {
  [K in keyof Profile]?: string;
}

type ProfileReadonly = {
  readonly [K in keyof Profile]: string;
}

연산자를 이용해서 ?, readonly 제거

type ProfileOptional = {
  name?: string;
  skill?: string;
}

type ProfileReadonly = {
  readonly name: string;
  readonly skill: string;
}

type Profile = {
  [K in keyof Profile]-?: string;
}

type Profile = {
 -readonly [K in keyof ProfileReadonly] : string;
}

맵드 타입으로 유틸리티 타입 생성

Partial

interface Profile {
  name: string;
  skill: string;
}

type MyPartial<T> {
  [P in keyof T]?: T[P]
}

type ProfilePartial = MyPartial<Profile>;
/**
interface Profile {
  name?: string;
  skill?: string;
}
**/

Readonly

interface Profile {
  name: string;
  skill: string;
}

type MyReadonly<T> = {
 readonly [P in keyof T]: T[P]
}

type ProfileReadonly = MyReadonly<Profile>;
/**
interface Profile {
  readonly name: string;
  readonly skill: string;
}
**/

Pick

interface Profile {
  name: string;
  skill: string;
}

type MyPick<T, K extends keyof T>  = {
  [P in K]: T[P];
}

type ProfileName= MyPick<Profile, "name">;
/**
interface ProfileName {
  name: string;
}
**/

정리

맵드 타입(mapped type)은 이미 정의된 타입을 가지고 새로운 타입을 생성할 때 사용하는 타입 문법입니다.
맵드 타입을 통해 나만의 유틸리티 타입을 구현할 수 있습니다.
유틸리티 타입과 맵드 타입을 잘 활용하면 타입스크립트 코드를 간결하고 편리하게 사용할 수 있습니다.

profile
함께 개선하는 개발자

0개의 댓글