add generic dropdown example with infer, comp

joshua1988 · joshua1988 · commit 7d559dab9a04 · 2020-11-02T11:06:08.000+09:00
diff --git a/example/9_type-inference.ts b/example/9_type-inference.ts
@@ -0,0 +1,26 @@
+var a = 'a';
+
+function logA(a = 'a') {
+  var b = 10;
+  return b;
+}
+
+interface Dropdown<T> {
+  value: T
+  title: string;
+}
+var items: Dropdown<number> = {
+  value: 10,
+  title: 'a'
+}
+
+interface DetailedDropdown<T> extends Dropdown<T> {
+  description: string;
+  tag: T;
+}
+var detailItems: DetailedDropdown<number> = {
+  value: 'hi',
+  title: 'a',
+  description: 'b',
+  tag: 'c'
+}
diff --git a/example/dropdown-generic.html b/example/dropdown-generic.html
@@ -0,0 +1,26 @@
+<!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>
diff --git a/example/dropdown-generic.ts b/example/dropdown-generic.ts
@@ -0,0 +1,26 @@
+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);
+});
diff --git a/example/type-comp.ts b/example/type-comp.ts
@@ -0,0 +1,30 @@
+// 인터페이스
+interface Developer {
+  name: string;
+  skill: string;
+}
+
+interface Person {
+  name: string;
+}
+
+var a: Developer;
+var b: Person;
+// a = b; // X
+b = a; // O
+
+// 함수
+var add = function(a: number) {
+  // ...
+}
+var sum = function(a: number, b: number) {
+  // ...
+}
+// sum = add; // X
+// add = sum; // O
+
+// // 유니온 타입
+// var c: Developer | Person;
+// var d: Person | string;
+// c = d;
+// d = c;
