Typescript Guide

/01.fetchjson

• 타입스크립트 컴파일러(tsc) 실행 및 json 데이터타입 정의해보기

install

npm i -g typescript
npm i -g ts-node

run

// build
tsc index.ts
// run
node index.js
// compile and run
ts-node index.ts

/02.maps

• typescript 라이브러리 불러오는 방법과 타입정의파일(*.d.ts) 이해
• parcel-bundler 사용해보기
• Mappable 인터페이스 구현하기

install

npm i -g parcel-bundler

run

// build and run
parcel index.html

/03.sort

• tsconfig.json 생성 및 수정해보기(tsc --init)
• npm script: nodemon, concurrently 사용해보기
• number[], string, linked list 등 다른 형식의 데이터 컬렉션을 처리하는 Sort 추상 클래스 상속(inheritance) 구현하기

install

npm i nodemon concurrently

run

// build and run
npm start

/04.stats

• Nodejs type definition 알아보기(@types/node)
• Nodejs fs module을 이용하여 프리미어리그 전적 데이터 읽어서 리포트 제작해보기
• enum과 제네릭 알아보기
• date string을 Date type으로 변경해보기
• 자바스크립트 합성(composition) 이해하기

install

npm i

run

// compile and run
npm start;

enum

// enum - enumeration
export enum MatchResult {
  HomeWin = 'H',
  AwayWin = 'A',
  Draw = 'D'
}

generics

// crazy
const addOne = (a: number): number => {
  return a + 1;
};
const addTwo = (a: number): number => {
  return a + 2;
};
const addThree = (a: number): number => {
  return a + 3;
};
// =>
const add = (a: number, b: number): number => {
  return a + b;
};
add(10, 1);
add(10, 2);
add(10, 3);

// Nothing to do with generics
class HoldNumber {
  data: number;
}
class HoldString {
  data: string;
}
const holdNumber = new HoldNumber();
holdNumber.data = 123;
const holdString = new HoldString();
holdString.data = 'asgdasg';
// with generic =>
class HoldAnything<TypeOfData> {
  data: TypeOfData;
}
const holdNumber2 = new HoldAnything<number>();