타입스크립트 #2

김태현·2020년 12월 20일
0

타입스크립트

목록 보기
2/2
post-thumbnail

#2에서는 타입스크립트의 중요한 개념 중 하나인 인터페이스와 제네릭에 대해서 다뤄보자

인터페이스

타입스크립트에서 사용하는 상호 간에 정의한 약속 혹은 규칙
주로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다

interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

let todo: Todo;

todo = { id: 1, content: 'typescript', completed: false };

제네릭

타입을 마치 함수의 파라미터 개념을 받는 것
함수를 실제 정의할 때는 타입을 비워놓고, 함수를 호출할 때 그 타입을 지정해주는 것
그리고 그 타입을 추론을 해서 반환값 까지 타입을 붙일 수 있는 것
제네릭의 장점: 변수처럼 쓸 수 있기 때문에 하나의 인터페이스로 여러가지 타입을 커버할 수 있다.

예를 들어 이렇게 두 가지가 있을 때

const emails = [
  { value: 'naver.com', selected: true },
  { value: 'gmail.com', selected: false },
  { value: 'hanmail.net', selected: false },
];
const numberOfProducts = [
  { value: 1, selected: true },
  { value: 2, selected: false },
  { value: 3, selected: false },
];

value만 바뀌므로 인터페이스에 제네릭을 이용하여 간단하게 줄일 수 있다

 interface Dropdown<T> = {
   value: T;
   selected: boolean;
 }

이렇게 타입이 바뀌는 부분을 제네릭을 사용해서 인터페이스를 만들면
위에 썼던 emails와 numberOfProducts는 다음과 같이 바꿀 수 있다

emails는 value가 string 이므로 Dropdonw 인터페이스를 이용하여 제네릭 자리에 string을 넣어준다

const emails: Dropdown<string> [] = [
  { value: 'naver.com', selected: true },
  { value: 'gmail.com', selected: false },
  { value: 'hanmail.net', selected: false },
];

마찬가지로 numberOfProducts는 value가 string 이므로 이번엔 제네릭 자리에 number를 넣어준다

const numberOfProducts: Dropdown<number> [] = [
  { value: 1, selected: true },
  { value: 2, selected: false },
  { value: 3, selected: false },
];

이렇듯 제네릭을 사용하여 인터페이스를 만들면 중복되는 타입들 중 일부분만 변할 때 유연하게 대응할 수 있다!!

profile
프론트엔드 개발자

0개의 댓글