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

 

 

보통 타입스크립트에서 객체의 타입을 정의할 때,

있어도 되고 없어도 되는 타입(optional property) 옆에는 ? (물음표) 를 붙여서 정의하였다.

타입 스크립트는 꽤나 엄격한 언어라 값을 할당하지 않으면 에러가 발생하기 때문이다.

interface User {
  id: number;
  name: string;
  age: string;
  school?: string; // 학교는 선택항목이라 ?를 붙이게 됨
}

 

 

하지만 Omit 이라는 기능을 사용하면

객체에서 선택적으로 사용하는 속성은 ? 로 정의하지 않아도 알아서 제외된다는 것을 알게 되었다.

이 좋은 기능을 나만 알 순 없지. 자, Omit 사용하러 가보자

 

 

---

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

 

<오밋> 은 특정 속성만 제거한 타입을 정의하는 기능이다.

Omit은 <오리지널 타입을 넣고,  '제거할' | '항목들'> 로 구성된다. (Omit<T, K> 이렇게 두 개의 제네릭 타입으로 구성)

 

 

** 제네릭(Generic) 이란? (더보기클릭)

예전에 java 언어를 공부할 때, 함수나 클래스를 선언할 때 미리 리턴타입을 <꺽쇠>로 정의했다. 이것을 제네릭이라고 배웠다. 그러다가 javaScript 를 사용하면서 잊혀져간 개념이었다.

 

Java나 C++ 등의 정적 타입 언어에서는 함수 및 클래스를 선언하는 시점에서 매개변수 혹은 리턴 타입을 정의해야하기 때문에 기본적으로는 특정 타입을 위해 만들어진 클래스나 함수를 다른 타입을 위해 재사용할 수가 없다. 때문에 제네릭을 통해 함수와 클래스의 범용적인 사용을 가능케 한다.

JavaScript는 원래 타입 선언이 필요하지 않고, 그렇기에 특정 타입을 위해 만들어진 클래스나 함수도 타입 에러를 런타임에서 일으킬 뿐이다. 코드를 실행시키기 전까지는 함수와 클래스가 모든 타입에 대응한다. 그렇기 때문에 JavaScript에서는 제네릭이란 말을 들을 일이 없다.

정적 타입 언어에서도 이렇게 특정 타입을 위해 만들어진 함수 혹은 클래스를 보다 범용적으로 재사용하기 위한 요구가 있기 때문에 제네릭이라는 프로그래밍 기법이 생긴 게 아닐까한다. TypeScript도 마찬가지로 정적 타입 언어이기 때문에, 기본적으로 타입을 정의한 함수 혹은 클래스는 모두 다른 타입에 재사용할 수 없다. 제네릭을 사용하지 않는다면 말이다.

ref: 
https://hyunseob.github.io/2017/01/14/typescript-generic/

 

한마디로, 

타입은

자판기에 동전이 아닌 아무거나 넣지 못하게 막아주는 역할이고 (고장나지 않게 최소한 걸러준다.)

 

제네릭 타입은

자판기에 아무거나 넣지 못하게 막아주는 역할 + 미국으로 수출하는 자판기에는 미국 동전만, 인도로 수출하는 자판기에는 인도 동전만 넣을 수 있도록 해주는 장치인 것이다.

 

 

 

 

Reply.tsx

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

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

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

// 오리지날 댓글 타입  
interface Reply {
  id: number;
  comment: string;
  createdAt: string;
  updatedAt: string;
  deletedAt: string;
}

// 오밋으로 몇개 항목 제외하고 인터페이스 재정의하기
interface ReplyInput extends Omit<Reply,  'createdAt' | 'updatedAt' | 'deletedAt'> {
  id: number;
  comment: string;
}

 

 

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

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

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