반응형
지난 시간에는 Omit 으로 타입에서 사용하지 않는 프로퍼티들을 제외시키고 자유롭게 사용해보았다.
이번 시간에는 Pick 으로 타입에서 사용할 프로퍼티들만 골라서 자유롭게 사용해보자.
Hoxy, 오밋(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: '안뇽하세요',
};
반응형
'React' 카테고리의 다른 글
React(64) React-color 컬러피커 라이브러리 사용하기 (0) | 2022.03.13 |
---|---|
React - Input 실행오류 A component is changing an uncontrolled input to be controlled. (0) | 2022.03.06 |
React(62) TypeScript - Omit 으로 객체에서 특정 타입 빼고 사용하기 (0) | 2022.02.25 |
React(61) React Toolkit - createSelector 사용하기 (0) | 2022.02.19 |
React(60) Redux-toolkit 사용하기 (0) | 2022.02.17 |
댓글