from generic to quiz 2 solution

joshua1988 · joshua1988 · commit a50d96a58edb · 2020-10-23T11:42:44.000+09:00
diff --git a/class-note/8_generics.ts b/class-note/8_generics.ts
@@ -0,0 +1,95 @@
+// function logText(text) {
+//   console.log(text);
+//   return text;
+// }
+// logText(10); // 숫자 10
+// logText('하이'); // 문자열 하이
+// logText(true); // 진위값 true
+
+// function logText<T>(text: T): T {
+//   console.log(text);
+//   return text;
+// }
+// logText<string>('하이');
+
+// function logText(text: string) {
+//   console.log(text);
+//   // text.split('').reverse().join('');
+//   return text;
+// }
+
+// function logNumber(num: number) {
+//   console.log(num);
+//   return num;
+// }
+
+// function logText(text: string | number) {
+//   console.log(text);
+//   return text;
+// }
+
+// const a = logText('a');
+// logText(10);
+// const num = logNumber(10);
+// logText(true);
+
+function logText<T>(text: T): T {
+  console.log(text);
+  return text;
+}
+
+// const str = logText<string>('abc');
+// str.split('');
+// const login = logText<boolean>(true);
+
+// logText('a')
+// logText(10)
+
+// 인터페이스에 제네릭을 선언하는 방법
+// interface Dropdown {
+//   value: string;
+//   selected: boolean;
+// }
+
+// const obj: Dropdown = { value: 'abc', selected: false };
+
+interface Dropdown<T> {
+  value: T;
+  selected: boolean;
+}
+const obj: Dropdown<number> = { value: 'abc', selected: false };
+
+// 제네릭 타입 제한
+// function logTextLength<T>(text: T[]): T[] {
+//   console.log(text.length);
+//   text.forEach(function (text) {
+//     console.log(text);
+//   });
+//   return text;
+// }
+// logTextLength<string>(['hi', 'abc']);
+
+// 제네릭 타입 제한 2 - 정의된 타입 이용하기
+interface LengthType {
+  length: number;
+}
+function logTextLength<T extends LengthType>(text: T): T {
+  text.length;
+  return text;
+}
+logTextLength(10);
+logTextLength({ leng: 10 });
+
+// 제네릭 타입 제한 3 - keyof
+interface ShoppingItem {
+  name: string;
+  price: number;
+  stock: number;
+}
+
+function getShoppingItemOption<T extends keyof ShoppingItem>(itemOption: T): T {
+  return itemOption;
+}
+// getShoppingItemOption(10);
+// getShoppingItemOption<string>('a');
+getShoppingItemOption('name');
diff --git a/example/8_generics.ts b/example/8_generics.ts
@@ -51,4 +51,4 @@ function getAllowedOptions<T extends keyof ShoppingItems>(option: T): T {
 }
 getAllowedOptions('nothing');
 // const a = getAllowedOptions('name');
-// a.toUpperCase(); // Name
+// a.toUpperCase(); // Name
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,50 @@
+interface DropdownItem<T> {
+  value: T;
+  selected: boolean;
+}
+
+// interface Email {
+//   value: string;
+//   selected: boolean;
+// }
+
+const emails: DropdownItem<string>[] = [
+  { value: 'naver.com', selected: true },
+  { value: 'gmail.com', selected: false },
+  { value: 'hanmail.net', selected: false },
+];
+
+// interface ProductNumber {
+//   value: number;
+//   selected: boolean;
+// }
+
+// interface TrueFalse {
+//   value: boolean;
+//   selected: boolean;
+// }
+
+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);
+});
diff --git a/quiz/2_address-book/.eslintrc.js b/quiz/2_address-book/.eslintrc.js
@@ -23,8 +23,8 @@ module.exports = {
         arrowParens: 'avoid',
       },
     ],
-    '@typescript-eslint/no-explicit-any': 'off',
-    "@typescript-eslint/explicit-function-return-type": 'off',
+    // '@typescript-eslint/no-explicit-any': 'off',
+    // "@typescript-eslint/explicit-function-return-type": 'off',
     'prefer-const': 'off',
   },
   parserOptions: {
diff --git a/quiz/2_address-book/src/a.ts b/quiz/2_address-book/src/a.ts
@@ -0,0 +1,14 @@
+// function fetchItems() {
+//   let items = ['a', 'b', 'c'];
+//   return items;
+// }
+// let result = fetchItems();
+// console.log(result);
+
+function fetchItems(): Promise<string[]> {
+  let items: string[] = ['a', 'b', 'c'];
+  return new Promise(function (resolve) {
+    resolve(items);
+  });
+}
+fetchItems();
diff --git a/quiz/2_address-book/src/index.ts b/quiz/2_address-book/src/index.ts
@@ -10,11 +10,17 @@ interface Contact {
   phones: PhoneNumberDictionary;
 }
 
+enum PhoneType {
+  Home = 'home',
+  Office = 'office',
+  Studio = 'studio',
+}
+
 // api
 // TODO: 아래 함수의 반환 타입을 지정해보세요.
-function fetchContacts() {
+function fetchContacts(): Promise<Contact[]> {
   // TODO: 아래 변수의 타입을 지정해보세요.
-  const contacts = [
+  const contacts: Contact[] = [
     {
       name: 'Tony',
       address: 'Malibu',
@@ -57,45 +63,55 @@ function fetchContacts() {
 // main
 class AddressBook {
   // TODO: 아래 변수의 타입을 지정해보세요.
-  contacts = [];
+  contacts: Contact[] = [];
 
   constructor() {
     this.fetchData();
   }
 
-  fetchData() {
+  fetchData(): void {
     fetchContacts().then(response => {
       this.contacts = response;
     });
   }
 
   /* TODO: 아래 함수들의 파라미터 타입과 반환 타입을 지정해보세요 */
-  findContactByName(name) {
+  findContactByName(name: string): Contact[] {
     return this.contacts.filter(contact => contact.name === name);
   }
 
-  findContactByAddress(address) {
+  findContactByAddress(address: string): Contact[] {
     return this.contacts.filter(contact => contact.address === address);
   }
 
-  findContactByPhone(phoneNumber, phoneType: string) {
+  // home, office, studio
+  findContactByPhone(phoneNumber: number, phoneType: PhoneType): Contact[] {
     return this.contacts.filter(
       contact => contact.phones[phoneType].num === phoneNumber
     );
   }
+  // findContactByPhone('officce');
 
-  addContact(contact) {
+  addContact(contact: Contact): void {
     this.contacts.push(contact);
   }
 
-  displayListByName() {
+  displayListByName(): string[] {
     return this.contacts.map(contact => contact.name);
   }
 
-  displayListByAddress() {
+  displayListByAddress(): string[] {
     return this.contacts.map(contact => contact.address);
   }
   /* ------------------------------------------------ */
 }
 
+// let heroes = [
+//   { name: 'Tony', age: 30 },
+//   { name: 'Captain', age: 100 },
+// ];
+// heroes.map(function (hero) {
+//   return hero.name;
+// }); // ['Tony', 'Captain']
+
 new AddressBook();
diff --git a/quiz/2_address-book/tsconfig.json b/quiz/2_address-book/tsconfig.json
@@ -4,7 +4,9 @@
     "checkJs": true,
     "target": "es5",
     "lib": ["es2015", "dom", "dom.iterable"],
-    "noImplicitAny": false
+    "noImplicitAny": true,
+    "strict": true,
+    "strictFunctionTypes": true
   },
   "include": ["./src/**/*"]
 }

Original file line number	Diff line number	Diff line change
`@@ -51,4 +51,4 @@ function getAllowedOptions<T extends keyof ShoppingItems>(option: T): T {`
`51`	`51`	`}`
`52`	`52`	`getAllowedOptions('nothing');`
`53`	`53`	`// const a = getAllowedOptions('name');`
`54`		`-// a.toUpperCase(); // Name`
	`54`	`+// a.toUpperCase(); // Name`