타입스크립트 제너릭에 대해서 배웠다.
interface Foo {
value: string;
sex: boolean;
}
interface Loo {
value: number;
sex: boolean;
}
위와 같이 공통된 부분을 제거할 수 있다.
interface FooLoo<T> {
value: T;
sex: boolean;
}
어떻게 활용할 수 있을까?
interface DropdownItem<T> {
value: T;
selected: boolean;
}
const emails: DropdownItem<string>[] = [
{ value: "naver.com", selected: true },
{ value: "gmail.com", selected: false },
{ value: "hanmail.net", selected: false },
];
const numberOfProducts: DropdownItem<number>[] = [
{ value: 1, selected: true },
{ value: 2, selected: false },
{ value: 3, selected: false },
];
function createDropdownItem<T>(item: DropdownItem<T>) {
const option = document.createElement("option");
option.value = item.value.toString();
option.innerText = item.value.toString();
option.selected = item.selected;
return option;
}
// NOTE: 이메일 드롭 다운 아이템 추가
emails.forEach(function (email) {
const item = createDropdownItem<string>(email);
const selectTag = document.querySelector("#email-dropdown");
selectTag.appendChild(item);
});