반응형
제네릭 사용 전
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<h1>이메일 선택 드롭다운</h1>
<select id="email-dropdown">
<option value="naver.com" selected>naver.com</option>
<option value="google.com">google.com</option>
<option value="hanmail.net">hanmail.net</option>
</select>
</div>
<div>
<h1>상품 수량 선택 드롭다운</h1>
<select id="product-dropdown">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</body>
</html>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 },
];
function createDropdownItem(item) {
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(email);
const selectTag = document.querySelector('#email-dropdown');
selectTag.appendChild(item);
});유니온타입으로 타입정의 했을시
interface Email{
value : string;
selected : boolean;
}
interface ProductNumber{
value: number;
selected: boolean;
}
const emails: Email[] = [
{ 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 },
];
function createDropdownItem(item : Email | ProductNumber) {
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(email);
const selectTag = document.querySelector('#email-dropdown');
selectTag.appendChild(item);
});
numberOfProducts.forEach(function (product){
const item = createDropdownItem(product);
})유니온타입으로 사용시 interface 가 늘어나면서 코드가 늘어남
매번 인터페이스를 통한 타입정의를 해줘야하는 단점이 있음
인터페이스에 제네릭을 선언하는 방법
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(item: DropdownItem<string> | DropdownItem<number>) {
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(email);
const selectTag = document.querySelector('#email-dropdown');
selectTag.appendChild(item);
});
numberOfProducts.forEach(function (product){
const item = createDropdownItem(product);
})하나의 인터페이스로 제네릭을 이용해서 여러 함수의 타입을 커버하는 제네릭의 장점이다.
반응형
'TypeScript > TypeScript - 기초부터 실전까지' 카테고리의 다른 글
| 17. tsconfig.json, .eslintrc.js 설정 (0) | 2023.10.14 |
|---|---|
| 16. 제네릭의 타입 제한방법 3가지 | keyof (0) | 2023.10.09 |
| 14. 제네릭 | 기본 문법 | 기존타입 정의, 유니온 타입을 이용한 선언 방식의 문제점과 제네릭의 장점 (0) | 2023.10.08 |
| 13. 타입스크립트의 클래스 문법 (0) | 2023.10.08 |
| 12. 클래스 | 프로토타입 (0) | 2023.10.08 |