[TS] interface에 제네릭을 선언하는 경우

그냥 interface를 사용하는 경우

 

interface Dropdown {
  value: string;
  selected: boolean;
}

const obj: Dropdown = { value: 'abc', selected: false };

 

 

interface에 제네릭을 선언한 경우

 

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

const obj: Dropdown<string> = { value: 'abc', selected: false };

const obj: Dropdown<number> = { value: 124, selected: false };

 

---

그래서 

interface Email {
  value: string;
  selected: boolean;
}
interface ProductNumber {
  value: number;
  selected: boolean;
}
interface TrueFalse {
  value: boolean;
  selected: boolean;
}

이거가 하나로 정리된다.

 

interface DropdownItem<T> {
  value: T;
  selected: boolean;
}

---

그래서 제네릭으로 다 정리하면

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

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

 

 

const numberOfProducts: ProductNumber[] = [
  { value: 1, selected: true },
  { value: 2, selected: false },
  { value: 3, selected: false },
];

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