14:05 강의 시작

강의 전 필수 준비 항목
- Typescript 3.3 버전 이상 설치 -> http://bit.ly/2DaugTt
- 2 주차 강의 자료 확인 -> http://bit.ly/2CXmQmg

W01 Q&A

Typescript 에서 third party library types(definition) 가 없는 경우가 있나요 ?

Typescript는 babel 을 따로 설치하지 않아도되나요 ?

낮은 브라우저에서도 실행되게 하려면 polyfill을 적용해야하는거가요 ?

Promise 와 동기/비동기에 대해서 잘 모르겠어요.

Typescript 에서 함수내 await 을 사용하면 왜 제너릭에 Promise 객체를 담나요 ?

CoffeeScript 등 에서는 자바스크립트 라이브러리들을 사용하는데 있어서 오류가 있나요 ?

1주차 강의 요약

내가 예상한 반응

허헣ㅎ 이 동무 보소

아 .. 이건 좀

실제 반응

모르는거 언제든 질문 해주세요.

지식은 덤이고 최다 질문자는 스타벅스 5만원 기프티콘 드림

영화를 추천해줘

2000 - 2010 년도 영화 중 네티즌 평점이 인간적으로 6점이 넘는 일본 호러 영화로 추천해줘

필수 사용 항목
- Typescript (3.3 이상)
- RxJS

제가 작성한 추천 코드는 다음주 수요일 2주차 Q&A 와 함께 전달 할게요

규칙

타입 명시할 것
any 타입 사용 금지
도움이 필요한데 그냥 넘어가지 않기

https://github.com/typescript-fastcampus/recommend-movies-for-me

Fork me

git checkout -b {본인 닉네임}

기능 완성 후, 해당 repository 에 pull request

"npm start" 커맨드 질의 시 추천 영화 목록이 출력 되야함

타입 명시할 것

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
     "outDir": "dist",
    "strict": true,
     "noImplicitAny": true,
    "esModuleInterop": true
  }
}

Add "noImplicitAny"

암시적으로(implicitly) 선언된 파라미터들이 any 타입으로 추론 되면 에러 처리

noImplicitAny 활성화 했을 때

// Error !! TS7006: Parameter 'x' implicitly has an 'any' type
// Error !! TS7006: Parameter 'y' implicitly has an 'any' type

function calculateDistance(x, y) {
  // Some codes
}

Found 2 errors
Error !! TS7006: Parameter 'x' implicitly has an 'any' type

Error !! TS7006: Parameter 'y' implicitly has an 'any' type

Any 사용하지 말 것

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "no-any": true,
        "no-console": false,
        "quotemark": false,
        "new-parens": false,
        "no-empty": false
    },
    "rulesDirectory": []
}

"no-any" 활성화하면 any 타입 사용 시 IDE 에서 하이라이트 해줌.

따라서 본인 IDE 에서 tslint 활성화 바람

webstorm 의 경우 preferences -> TypeScript -> TSLint -> check enable mark

Add no-any true

Any 타입 쓸거면 그냥 자바스크립트 사용하셈

RxJS

Rx(Reactive Extensions) 중 JavaScript 버전

RxJava
RxRuby
RxPython
RxGo
RxKotlin
RxCpp
Rx.Net

여러 플랫폼의 Rx 가 존재함
RxJS도 그중하나.

우수한 회사들이 현재 프로덕트 레벨에서 사용 중

카카오
우아한 형제들
샌드버드
레진 코믹스
코인원
플링크
빙글
넷플릭스
드라마앤컴퍼니
등등..

RxJS는 Functional Reactive Programming 을 위한 Extension

RxJS 실제 구인에 도움이 되긴함 ?ㅋ

응 도움돼

중요한건 저거 우대사항아니고 필수사항임.

Reactive Programming

기존의 Imperative Programming(명령형 프로그래밍)은 절차지향 적인 반면 Reactive Programming (반응형 프로그래밍) 에서는 데이터 흐름을 먼저 정의하고 데이터가 변경되었을때 연관되는 함수나 수식이 업데이트 되는 방식을 말함.

Reactive programming 에서는 기본적으로 모든 데이터는 스트림으로 간주함

Reactive Programming 핵심은 비동기 작업이랑 observer 패턴의 조화임

옵저버 디자인 패턴이란

옵서버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴임

쉽게 말해 유튜브에서 나를 구독해주는 구독자들한테만 특정 이벤트를 날린다고 생각하면 됨.

스트림 ?

각순서에 의해 전달되어진 값들의 collection

스트림은 여러 operator 들로 immutable하게 처리할 수 있음.

이러한 stream 을 관측(observation)하고 반응하는 방식으로 동작하는 프로그래밍을 reactive programming 이라함

근데 Promise 에서는 핸들링 또는 구현하기 어려운 부분들을 Obserable 을 통해서 해결 가능함

Promise 는 하나의 이벤트만 핸들링 가능함.
또한 질의되면 취소가 불가능함.

참고: https://stackoverflow.com/questions/37364973/what-is-the-difference-between-promises-and-observables

Promise 랑 뭐가 다른거임?

둘다 비동기 프로그래밍을 위해서 사용됨

Observable 은 여러개의 이벤트 핸들링 가능함
그리고 질의 중에 취소 가능함.

더 자세한 내용은 일전에 블로그에 정리해 둔게 있음

https://blog.hax0r.info/2018-05-09/reactive-programming/
https://blog.hax0r.info/2018-05-10/getting-started-with-functional-reactive-programming-using-rxjs/

따라서 Rx 는 비동기 갑인 자바스크립트 세계에서 각광 받고 있음.

// Distinguish between drag and click

/ RxJS v6+
import { fromEvent, merge } from 'rxjs';
import { sample, mapTo } from 'rxjs/operators';

const listener = merge(
  fromEvent(document, 'mousedown').pipe(mapTo(false)),
  fromEvent(document, 'mousemove').pipe(mapTo(true))
)
  .pipe(sample(fromEvent(document, 'mouseup')))
  .subscribe(isDragging => {
    console.log('Were you dragging?', isDragging);
  });
C

예제 코드 확인: https://jsfiddle.net/6yy6q0Lo/1/

Filter out close points Goal

Create a function that returns an UnaryFunction that filters out points closer to the given distance from the last output point.
You can change or add codes between >>>>>> ~ <<<<<<

Example

when distance: 2.1
source: {x: 1, y: 1} --> {x: 1, y: 1} --> {x: 2, y: 3} --> {x: 3, y: 3} --> {x: 4, y: 4}
output: {x: 1, y: 1} -------------------> {x: 2, y: 3} -------------------> {x: 4, y: 4}

RxJS 숙제

Fork me: https://github.com/typescript-fastcampus/rxjs-for-you

Show me your code !

틀려도 괜찮고 안해도 괜찮음, 다만 하면서 분명히 궁금사항이 생길텐데 이를 해결하면서 진행하면 학습 효과에 좋을거임.

새로 개봉하는 호러 영화를 주기적으로 내 메일로 추천해줘

필수 사용 항목
- Typescript (3.3 이상)
- RxJS
- TypeORM
- Serverless

규칙

타입 명시할 것
any 타입 사용 금지
도움이 필요한데 그냥 넘어가지 않기

다음 V2

타입이란

데이터의 성격

누군가는 착한 놈, 누군가는 나쁜 놈, 누군가는 이상한 놈

정우성

정우성: 착한 놈

TypeError: "x" is not a function

// Null
let a: null = null;

// String
let b: string = 'Hi Hax0r';

// Object
let c: object = {};

// Number
let d: number = 1 || 0b111001 || 0o436 || 0xadf0d;

// Undefined
let e: undefined;

// Boolean
let f: boolean | Boolean = true || false;

// Array
let g: Array<string> | string[] = [] || [b];

// Function
let h: Function | (void) = (): void => {};

// Tuple
let i: [string, number] = ['Hax0r', 24];


// Never
let j: Function = (): never => {
  while(true) {
    console.log(Date.toString());
  }
};

// Enum
enum PaymentFlag {
  Fail,
  InProgress,
  Success
}
let k: PaymentFlag = PaymentFlag.Success;

// Void
let l: void = undefined;

// Custom
type response = {
  statusCode: number;
  body: string;
};

let m: response = {
  statusCode: 200,
  body: ''
};

(): response => {
  return {
    statusCode: 200,
    body: ''
  }
};

// Any
let o: any = a || b || c || d || e || f || g || h || i;

console.log('o', o);

예제 코드: https://github.com/typescript-fastcampus/all-about-types

기본

boolean
number
string
null
undefined
Symbol (ES6 에서 추가)

자바스크립트 기본 데이터 타입 (Primitive Type)

열거형

import axios, {AxiosResponse} from 'axios';
import {forkJoin, Observable} from "rxjs/index";

enum SuggestionPlatform {
  NaverMovie = 'https://movie.naver.com/',
  DaumMovie = 'https://movie.daum.net/',
  Watch = 'https://play.watcha.net/',
}
export class RecommendMovies {
  private suggestionPlatformEndPoints: string[] = [
    SuggestionPlatform.NaverMovie,
    SuggestionPlatform.DaumMovie,
    SuggestionPlatform.Watch,

  ];

  public exampleGetContents(): Observable<AxiosResponse[]>
  {
    return forkJoin(this.suggestionPlatformEndPoints.map((suggestionPlatformEndPoint: string) => {
      return axios.get(suggestionPlatformEndPoint);
    }));
  }
}

객체

const hax0r: {
  readonly name: string;
  age?: number;
  height?: number;
} = {
  name: 'youngjun',
};

hax0r.name = '33'; // Error : cannot assign to read only property

배열과 튜플

const hax0rsPocket: [string, number, string] = ['phone', 3, 'money'];
// If array
// Type error 'number' is not assignable to type 'string'
const hax0rsPocket: string[] = ['phone', 3, 'money'];

유니온

function unino(n: number, parseToString: boolean = false): number | string {
  return parseToString ? (n * 2).toString() : n * 2;
}

a or b

인터섹션

a and b

type IStudent = {
  id: number;
  age: number;
}

type IWorker = {
  companyId: number
}

function intersection(): IStudent & IWorker {
  return {
    id: 1,
    age: 24,
    companyId: 1
  }
}

커스텀 타입 (별칭, Type Alias)

type yourType = {
  readonly a: number;
  b?: string;
  c: never
}

interface yourType = {
  readonly a: number;
  b?: string;
  c: never
}

인터페이스랑 비슷함.

별칭은 실제 Type이 새로 정의된 것이 아닌 해당 Type에 대한 refer인 반면, Interface는 새로 정의한 Type. + 별칭은 서로 상속 불가능

이미 존재하는 타입에 말그대로 별칭을 붙이는거임

type Height = number;
const checkHeight = (height: number | Height) => height > 50;

함수

const sum: (a: number, b: number, c?: number) => number = (a, b = 3, c): number => (c ? a + b + c : a + b);
sum(1, 2);

타입 추론과 단언

타입스크립트는 타입 추론을 지원함. 따라서 명시적인 타입 표기 없이도 타입 정보를 이해할 수 있음.

const x: number = 1 * 1;

const x = 1 * 1;

명시된 타입 표기를 없애도 타입스크립트는 x 값인 1 * 1 으로부터 number 타입이라는 것을 추론 해 낸다.

단언

interface JungOuSeong {
  readonly name: string;
  run(): void;
  money: number;
}

interface SongKangHo {
  readonly name: string;
}

interface LeeByungHun {
  readonly name: string;
  ticket: boolean;
  fly(): void
}

type Guy = JungOuSeong | SongKangHo | LeeByungHun;
function whoIsBadGuy(guy: Guy): void {
  (guy as JungOuSeong).run();
}

컴파일러가 타입 추론과 같은 기법으로 타입을 판단하지만 이 판단을 무시하고 원하는 임의의 타입을 값에 할당하고 싶다면 타입 단언(type assertion)을 사용하라

다중으로도 가능함

interface JungOuSeong {
  readonly name: string;
  run(): void;
  money: number;
}

interface SongKangHo {
  readonly name: string;
}

interface LeeByungHun {
  readonly name: string;
  ticket: boolean;
  fly(): void
}

type Guy = JungOuSeong | SongKangHo | LeeByungHun;
function whoIsBadGuy(guy: Guy): void {
  (((guy as JungOuSeong) as SongKangHo) as LeeByungHun).fly();
}

다음 시간

모듈
제너릭
데코레이터
인터페이스
클래스
네임스페이스
타입스크립트 컴파일 과정 이해하기
컴파일 옵션 알아보기