React(63) TypeScript - Pick 으로 객체에서 특정타입만 골라 사용하기

 

 

지난 시간에는 Omit 으로 타입에서 사용하지 않는 프로퍼티들을 제외시키고 자유롭게 사용해보았다.

이번 시간에는 Pick 으로 타입에서 사용할 프로퍼티들만 골라서 자유롭게 사용해보자.

 

 

Hoxy, 오밋(Omit) 이랑 비교해보고 싶으시다면 ... ? 지난 포스팅보기 ↓↓↓

React(62) Omit 으로 객체에서 특정 타입 빼고 사용하기

 

---

React(63) Pick 으로 객체에서 특정타입만 골라 사용하기

 

 

아래의 댓글 타입에서 나는 id , comment 만 사용할 예정이다.

왜냐하면 나머지는 backend 에서 자동으로 돌려보내주는 항목들이라 필요는 하지만 사용하지는 않기 때문이다.

그래서 오리지널 댓글 타입 위에 Pick 을 살포시 뿌려좋았다. (extend)

// 오리지날 댓글 타입  
interface Reply { 
  id: string; // 얘랑
  comment: string; // 얘만 쓸건데 어떻허지...?
  createdAt: string;
  updatedAt: string;
  deletedAt: string;
}

// 픽으로 필요한 속성만 넣어서 다시 인터페이스 재정의하기
interface replyInput extends Pick< 'id' | 'comment'> {
  id: string;
  comment: string;
}

 

 

타입에 정의된 속성을 사용하지 않아도 컴포넌트 내부에서는 타입 에러가 나지 않는다.

(아주 물흐르듯이 자연스럽게~ 에러없이 사용 가능하다)

const reply: ReplyInput = {
  id: 202202252221,
  comment: '안뇽하세요',
};