Typescript: Pick and Omit

Typescript: Pick and Omit

안녕하세요.

오늘은 타입스크립트의 유틸리티 타입스들 중 pick과 omit에 관해서 알아보도록 하겠습니다.

타입스크립트로 개발을 하면서 새로운 타입들을 지정해줄때 한 번씩 이러한 생각이 들 때가 있습니다.

기존에 작성된 타입 중 하나만 제외시키고 싶은데 혹은 하나를 더 추가하고 싶은데 하는 생각말이죠.

잘 이해가 되지 않으신다고요? 아래의 코드를 보겠습니다.

 

type Person = {
  name: string;
  age: number;
  hobby: string;
};

여기 Person이라는 타입이 있습니다. 이 타입은 각각의 name, age 그리고 hobby 타입을 지정하였습니다.

이때 만약 Person타입에 address라는 key를 추가하고 싶다면?? 혹은 name과 age만 필요하고 hobby는 필요하지 않는다면??

 

그럴 때마다 아래와 같이 비슷한 타입을 또다시 지정해 주는 게 바람직한 방법일까요??

너무 불필요하게 같은 내용을 반복하는게 과연 좋은 것일까요??

기존의 Person이라는 타입을 조금 변형하거나 바꿔서 사용할 수는 없는 것일까요??

이럴 때 Omit과 Pick을 사용할 수 있습니다.

type Person = {
  name: string;
  age: number;
  hobby: string;
};

type personWithAddress = {
  name: string;
  age: number;
  hobby: string;
  address: string;
};

type personWithoutHobby = {
  name: string;
  age: number;
};

 

1. Omit<type, keys>

먼저 Omit을 사용하기전에 뜻을 먼저 알아보면 생략하다 혹은 혹은 빠뜨리다 등으로 해석할 수 있을 것 같습니다.

여기서는 타입안에 존재하는 여러 key들 중 선언된 key들을 생략하겠다.라는 뜻입니다.

예를 다시 보겠습니다.

type Person = {
  name: string;
  age: number;
  hobby: string;
};

아까와 동일하게 Person이라는 타입이 있고 각각의 키들이 존재합니다.

이때 hobby라는 key를 생략한 채 name과 age만을 사용한 변형된 타입을 만들고 싶습니다.

그럴 때는 이렇게 코드를 작성할 수 있습니다.

type Person = {
  name: string;
  age: number;
  hobby: string;
};


type PersonWithoutHobby = Omit<Person, 'hobby'>;

// type personWithAddress = {
//     name: string;
//     age: number;
//   };

 

Omit을 사용한  PersonWithoutHobby는 아래의 주석과 같은 타입입니다.

하지만 주석과 같이 다시 Person과 비슷한 타입을 새로 지정하는 것이 아닌 Person이라는 타입에서 hobby라는 key를 생략함으로써

4줄짜리 코드가 1줄로 줄어들었습니다.

 

그렇다면 이번에 hobby뿐만 아니라 age라는 key도 같이 생략하고 싶다면?? 그때는 어떻게 해야 할까요?

PersonWithoutHobby라는 타입에서 Omit을 통해 다시 age라는 key를 선언해야 할까요?

정답은 아니오입니다. 그것보다 훨씬 쉬운 방법이 있습니다.

아래의 코드를 보겠습니다.

type Person = {
  name: string;
  age: number;
  hobby: string;
};


type PersonWithoutHobbyAndAge = Omit<Person, 'hobby' | 'age'>;

// type personWithAddress = {
//     name: string;
//   };

Omit을 사용하여 여러 key들을 생략할 때 콤마를 사용하지 않고 이렇게 파이프를 사용합니다.

이 부분을 유의하시기 바랍니다.

 

2. Pick <Type, Keys>

이번에는 반대로 Pick에 관해서 알아보겠습니다. Pick은 모두 알다시피 선택하다는 뜻을 가지고 있습니다.

이는 말 그대로 현재 존재하는 타입에서 필요한 key들을 선택하여 사용하겠다라고 생각하시면 됩니다.

type Person = {
  name: string;
  age: number;
  hobby: string;
};

자 이번에도 위와 같이 Person이라는 타입이 있습니다.

그리고 이번에는 age와 hobby를 제외한 name이라는 key만 사용하고 싶습니다.

그렇다면 아래와 같이 Pick을 이용할 수 있습니다.

 

type Person = {
  name: string;
  age: number;
  hobby: string;
};

 type PickNameFromPerson = Pick<Person, 'name'>;

// type PickNameFromPerson = {
//     name: string;
//   };

위와 같이 Pick을 사용하고 원하는 타입과 원하는 key를 지정해 주면 됩니다.

그러면 PickNameFromPerson이라는 타입은 주석된 타입과 동일한 결과를 가져옵니다.

그렇다면 모두 예상하셨듯이 여러 key들을 가져오는 방법도 아실 것이라고 생각합니다.

그래도 예시를 보겠습니다.

이번에는 name과 age를 가져오고 싶습니다.

type Person = {
  name: string;
  age: number;
  hobby: string;
};

 type PickNameFromPerson = Pick<Person, 'name' | 'age'>;

// type PickNameFromPerson = {
//     name: string;
//     age: number;
//   };

자 이렇게 여러 key들을 가져올 때는 Omit과 마찬가지로 파이프를 사용하면 됩니다.

 

 

3. 마치며

오늘은 Omit과 Pick을 알아보았습니다.

이러한 유틸리티들은 종류가 상당히 많습니다. 가능하다면 하나씩 다루어보도록 하겠습니다.

그리고 특히나 Omit과 Pick은 실제현업에서도 많이 사용되고 있습니다. 그렇기에 알아두시면 좋은 정보가 되지 않을까 싶습니다.

 

오늘 하루도 고생 많으셨습니다!

그리고 즐거운 코딩 많이 많이 하시길 바라겠습니다!

감사합니다!!

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, nie anzufangen.