본문 바로가기
React

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

by 새발개발JA 2022. 3. 1.
반응형

 

 

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

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

 

 

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

 

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

보통 타입스크립트에서 객체의 타입을 정의할 때, 있어도 되고 없어도 되는 타입(optional property) 옆에는 ? (물음표) 를 붙여서 정의하였다. 타입 스크립트는 꽤나 엄격한 언어라 값을 할당하지 않

devbirdfeet.tistory.com

 


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: '안뇽하세요',
};

 

 

 

반응형

댓글