before generics

Author: joshua1988

class-note/1_type-basic.ts

@@ -0,0 +1,30 @@
+// JS 문자열 선언
+// var str = 'hello';
+
+// TS 문자열 선언
+let str: string = 'hello';
+
+// TS 숫자
+let num: number = 10;
+
+// TS 배열
+let arr: Array<number> = [1,2,3];
+let heroes: Array<string> = ['Capt', 'Thor', 'Hulk', 10]
+let items: number[] = [1,2,3];
+
+// TS 튜플
+let address: [string, number] = ['gangnam', 100];
+
+// TS 객체
+let obj: object = {};
+// let person: object = {
+//   name: 'capt',
+//   age: 100
+// };
+let person: { name: string, age: number } = {
+  name: 'thor',
+  age: 1000
+}
+
+// TS 진위값
+let show: boolean = true;

class-note/2_functions.ts

@@ -0,0 +1,23 @@
+// 함수의 파라미터에 타입을 정의하는 방식
+// function sum(a: number, b: number) {
+//   return a + b;
+// }
+// sum(10, 20);
+
+// 함수의 반환 값에 타입을 정의하는 방식
+function add(): number {
+  return 10;
+}
+
+// 함수에 타입을 정의하는 방식
+function sum(a: number, b: number): number {
+  return a + b;
+}
+sum(10);
+
+// 함수의 옵셔널 파라미터(?)
+function log(a: string, b?: string) {
+
+}
+log('hello world');
+log('hello ts', 'abc');

class-note/3_interface.ts

@@ -0,0 +1,68 @@
+interface User {
+  age: number;
+  name: string;
+}
+
+// 변수에 인터페이스 활용
+var seho: User = {
+  age: 33,
+  name: '세호'
+}
+
+// 함수에 인터페이스 활용
+function getUser(user: User) {
+  console.log(user);
+}
+const capt = {
+  name: '캡틴',
+  age: 100
+}
+getUser(capt);
+
+// 함수의 스펙(구조)에 인터페이스를 활용
+interface SumFunction {
+  (a: number, b: number): number;
+}
+
+var sum: SumFunction;
+sum = function(a: number, b: number): number {
+  return a + b;
+}
+
+// 인덱싱
+interface StringArray {
+  [index: number]: string;
+}
+
+var arr: StringArray = ['a','b','c'];
+// arr[0] = 10;
+
+// 딕셔너리 패턴
+interface StringRegexDictionary {
+  [key: string]: RegExp;
+}
+
+var obj: StringRegexDictionary = {
+  // sth: /abc/,
+  cssFile: /\.css$/,
+  jsFile: /\.js$/,
+}
+// obj['cssFile'] = 'a'
+
+Object.keys(obj).forEach(function(value) {});
+
+// 인터페이스 확장
+interface Person {
+  name: string;
+  age: number;
+}
+
+interface Developer extends Person {
+  language: string;
+}
+
+var captain: Developer = {
+  language: 'ts',
+  age: 100,
+  name: '캡틴'
+}

class-note/4_type-aliases.ts

@@ -0,0 +1,22 @@
+// interface Person {
+//   name: string;
+//   age: number;  
+// }
+
+type Person = {
+  name: string;
+  age: number;
+}
+
+var seho: Person = {
+  name: '세호',
+  age: 30
+}
+
+type MyString = string;
+var str: MyString = 'hello';
+
+type Todo = { id: string; title: string; done: boolean };
+function getTodo(todo: Todo) {
+
+}

class-note/5_operator.ts

@@ -0,0 +1,35 @@
+// function logMessage(value: any) {
+//   console.log(value);
+// }
+// logMessage('hello');
+// logMessage(100);
+
+var seho: string | number | boolean;
+function logMessage(value: string | number) {
+  if (typeof value === 'number') {
+    value.toLocaleString();
+  }
+  if (typeof value === 'string') {
+    value.toString();
+  }
+  throw new TypeError('value must be string or number');
+}
+logMessage('hello');
+logMessage(100);
+
+// 인터섹션(교차) 타입
+interface Developer {
+  name: string;
+  skill: string;
+}
+
+interface Person {
+  name: string;
+  age: number;
+}
+
+function askSomeone(someone: Developer & Person) {
+  someone.name;
+  someone.age;
+  someone.skill;
+}

class-note/6_enum.ts

@@ -0,0 +1,27 @@
+enum Shoes {
+  Nike = '나이키',
+  Adidas = '아디다스'
+}
+
+var myShoes = Shoes.Nike;
+console.log(myShoes); // '나이키'
+
+// 예제
+enum Answer {
+  Yes = 'Y',
+  No = 'N',
+}
+
+function askQuestion(answer: Answer) {
+  if (answer === Answer.Yes) {
+    console.log('정답입니다');
+  }
+  if (answer === Answer.No) {
+    console.log('오답입니다');
+  }
+}
+askQuestion(Answer.Yes);
+askQuestion('Yes');
+// askQuestion('예스');
+// askQuestion('y');
+// askQuestion('Yes');

class-note/7_class.ts

@@ -0,0 +1,28 @@
+class Person {
+  private name: string;
+  public age: number;
+  readonly log: string;
+
+  constructor(name: string, age: number) {
+    this.name = name; 
+    this.age = age;
+  }
+}
+
+// 리액트 예전 문법 - 클래스 기반 코드
+class App extends React.Component {
+
+}
+
+// 리액트 최신 문법 - 훅 기반의 함수형 코드
+function App() {
+  return <div>Hello World</div>
+}
+
+// 
+new Vue({
+  el: '',
+  setup() {
+    
+  }
+})

class-note/class.js

@@ -0,0 +1,17 @@
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+var capt = new Person('캡틴', 100);
+
+class Person {
+  // 클래스 로직
+  constructor(name, age) {
+    console.log('생성 되었습니다');
+    this.name = name;
+    this.age = age;
+  }
+}
+
+var seho = new Person('세호', 30); // 생성 되었습니다.
+console.log(seho);

class-note/function.js

@@ -0,0 +1,5 @@
+function sum(a, b) {
+  return a + b;
+}
+
+sum(10, 20, 30, 40, 50);

example/4_interfaces.ts

@@ -5,7 +5,7 @@ interface User {
 }
 
 // 변수에 사용하는 경우
-const seho: User = { name: 'hi', age: 100 };
+const seho: User = { name: '세호', age: 100 };
 
 // 함수의 매개변수에 사용하는 경우
 function getUser(user: User) {
@@ -14,21 +14,34 @@ function getUser(user: User) {
 getUser(seho);
 
 // 함수의 전체 타입에 사용하는 경우
-// interface SumFunction {
-//   (a: number, b: number): number;
-// }
-// let sum: SumFunction;
-// sum = function (num1: number, num2: string): number {
-//   return num1 + num2;
-// };
+interface SumFunction {
+  (a: number, b: number): number;
+}
+let sum: SumFunction;
+sum = function (num1: number, num2: string): number {
+  return num1 + num2;
+};
 
 // 배열의 인덱싱에 사용하는 경우
-// interface StringArray {
-//   [index: number]: string;
-// }
-// let arr: StringArray;
-// arr[0] = 'hi';
-// arr[1] = 10;
+interface StringArray {
+  [index: number]: string;
+}
+let arr: StringArray;
+arr[0] = 'hi';
+arr[1] = 10;
+
+// 딕셔너리 패턴
+interface StringRegexDictionary {
+  [key: string]: RegExp;
+}
+
+const regexMap: StringRegexDictionary = {
+  cssFile: /\.css$/,
+  jsFile: /\.js$/,
+};
+
+Object.keys(regexMap).forEach(function(value) {
+})
 
 // 인터페이스 확장
 interface Person {

example/7_union-intersection.ts

@@ -37,4 +37,4 @@ interface Person {
 function askSomeone(someone: Developer | Person) {
   someone.name; // O
   someone.age; // X
-}
+}

example/8_generics.ts

@@ -39,14 +39,15 @@ interface ShoppingItems {
   stock: number;
 }
 function getAllowedOptions<T extends keyof ShoppingItems>(option: T): T {
-  if (option === 'name' || option === 'address') {
-    console.log('option type is string');
-    return option;
-  }
-  if (option === 'price' || option === 'stock') {
-    console.log('option type is number');
-    return option;
-  }
+  return option;
+  // if (option === 'name' || option === 'address') {
+  //   console.log('option type is string');
+  //   return option;
+  // }
+  // if (option === 'price' || option === 'stock') {
+  //   console.log('option type is number');
+  //   return option;
+  // }
 }
 getAllowedOptions('nothing');
 // const a = getAllowedOptions('name');

getting-started/index.js

@@ -0,0 +1,4 @@
+function sum(a, b) {
+    return a + b;
+}
+sum(10, 20);

getting-started/index.ts

@@ -0,0 +1,5 @@
+function sum(a: number, b: number): number {
+  return a + b;
+}
+
+sum(10, 20);

getting-started/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "noImplicitAny": true
+  }
+}

quiz/1_todo/src/a.js

@@ -0,0 +1,12 @@
+let arr = [
+  { gender: 'male', name: 'john' },
+  { gender: 'female', name: 'sarah' },
+  { gender: 'male', name: 'bone' },
+];
+
+let filtered = arr.filter(function (item) {
+  if (item.gender === 'female') {
+    return item;
+  }
+});
+console.log(filtered);