#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 },
];
이렇듯 제네릭을 사용하여 인터페이스를 만들면 중복되는 타입들 중 일부분만 변할 때 유연하게 대응할 수 있다!!