til type-compatilibity

Author: joshua1988

class-note/10_type-assertion.ts

@@ -0,0 +1,13 @@
+// 타입 단언(type assertion)
+var a;
+a = 20;
+a = 'a'
+var b = a as string;
+
+// DOM API 조작
+// <div id="app">hi</div>
+
+var div = document.querySelector('div');
+if (div) {
+  div.innerText 
+}

class-note/11_type-guard.ts

@@ -0,0 +1,34 @@
+interface Developer {
+  name: string;
+  skill: string;
+}
+
+interface Person {
+  name: string;
+  age: number;
+}
+
+function introduce(): Developer | Person {
+  return { name: 'Tony', age: 33, skill: 'Iron Making' }
+}
+var tony = introduce();
+console.log(tony.skill);
+
+if ((tony as Developer).skill) {
+  var skill = (tony as Developer).skill;
+  console.log(skill);
+} else if ((tony as Person).age) {
+  var age = (tony as Person).age;
+  console.log(age); 
+}
+
+// 타입 가드 정의
+function isDeveloper(target: Developer | Person): target is Developer {
+  return (target as Developer).skill !== undefined;
+}
+
+if (isDeveloper(tony)) {
+  console.log(tony.skill);
+} else {
+  console.log(tony.age);
+}

class-note/12_type-compatibility.ts

@@ -0,0 +1,45 @@
+// 인터페이스
+interface Developer {
+  name: string;
+  skill: string;
+}
+// interface Person {
+//   name: string;
+//   // skill: string;
+// }
+class Person {
+  name: string;
+  skill: string;
+}
+
+var developer: Developer;
+var person: Person;
+developer = new Person();
+// person = developer;
+
+// 함수
+var add = function(a: number) {
+  // ...
+}
+var sum = function(a: number, b: number) {
+  // ...
+}
+sum = add;
+// add = sum;
+
+// 제네릭
+interface Empty<T> {
+  // ..
+}
+var empty1: Empty<string>;
+var empty2: Empty<number>;
+empty1 = empty2;
+empty2 = empty1;
+
+interface NotEmpty<T> {
+  data: T;
+}
+var notempty1: NotEmpty<string>;
+var notempty2: NotEmpty<number>;
+notempty1 = notempty2;
+notempty2 = notempty1;

class-note/9_type-inference.ts

@@ -0,0 +1,39 @@
+// 타입 추론 기본 1
+var a = 'abc';
+
+function getB(b = 10) {
+  var c = 'hi';
+  return b + c;
+}
+
+10 + '10'; // 1010
+
+// 타입 추론 기본 2
+// interface Dropdown<T> {
+//   value: T;
+//   title: string;
+// }
+// var shoppingItem: Dropdown<string> = {
+//   value: 'abc',
+//   title: 'hello'
+// }
+
+// 타입 추론 기본 3
+interface Dropdown<T> {
+  value: T;
+  title: string;
+}
+interface DetailedDropdown<K> extends Dropdown<K> {
+  description: string;
+  tag: K;
+}
+
+var detailedItem: DetailedDropdown<number> = {
+  title: 'abc',
+  description: 'ab',
+  value: 'a',
+  tag: 'a',
+};
+
+// Best Common Type
+var arr = [1, 2, true, true, 'a'];

class-note/ts-modules/app.ts

@@ -0,0 +1,6 @@
+import { Todo } from './types'
+
+var item: Todo = {
+  title: '할 일 1',
+  checked: false,
+}

class-note/ts-modules/types.ts

@@ -0,0 +1,4 @@
+export interface Todo {
+  title: string;
+  checked: boolean;
+}

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'
+}

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;

quiz/2_address-book/src/index.ts

@@ -1,20 +1,4 @@
-interface PhoneNumberDictionary {
-  [phone: string]: {
-    num: number;
-  };
-}
-
-interface Contact {
-  name: string;
-  address: string;
-  phones: PhoneNumberDictionary;
-}
-
-enum PhoneType {
-  Home = 'home',
-  Office = 'office',
-  Studio = 'studio',
-}
+import { Contact, PhoneType } from './types';
 
 // api
 // TODO: 아래 함수의 반환 타입을 지정해보세요.
@@ -106,6 +90,9 @@ class AddressBook {
   /* ------------------------------------------------ */
 }
 
+let div = document.querySelector('.container') as HTMLDivElement;
+div.innerText;
+
 // let heroes = [
 //   { name: 'Tony', age: 30 },
 //   { name: 'Captain', age: 100 },

quiz/2_address-book/src/types.ts

@@ -0,0 +1,19 @@
+interface PhoneNumberDictionary {
+  [phone: string]: {
+    num: number;
+  };
+}
+
+interface Contact {
+  name: string;
+  address: string;
+  phones: PhoneNumberDictionary;
+}
+
+enum PhoneType {
+  Home = 'home',
+  Office = 'office',
+  Studio = 'studio',
+}
+
+export { Contact, PhoneType };