소소한 일기장

11 모나드

11-1 모나드 이해하기

• 모나드(Monad)
  • 수학의 '카테고리 이론(category theory)'이라는 분야에서 사용하는 용어
  • 프로그래밍에서 모나드는 일종의 '코드 설계 패턴(design pattern)'으로 몇 개의 인터페이스를 구현한 클래스
• 타입 클래스(type class)
  

  class Monad<T> {
    constructor(public value: T) {}
    static of<U>(value: U): Monad<U> { return new Monad<U>(value) }
    map<U>(fn: (x: T) => U): Monad<U> { return new Monad<U>(fn(this.value)) }
  }

• 어떤 클래스가 다음 네 가지 조건을 모두 만족한다면 그 클래스는 모나드
  • 펑터(Functor) : map이라는 인스턴스 메서드를 가지는 클래스
  • 어플라이(Apply) : 펑터이면서 ap라는 인스턴스 메서드를 가지는 클래스
  • 애플리커티브(Applicative) : 어플라이이면서 of라는 클래스 메서드를 가지는 클래스
  • 체인(Chain) : 애플리커티브이면서 chain이라는 메서드를 가지는 클래스
• 모나드 룰(Monad raw)
  • 어떤 클래스의 이름이 M이고 이 클래스의 인스턴스를 m이라고 할 때
    모나드는 애플리커티브와 체인의 기능을 가지고 있고 다음의 두 가지 법칙을 만족하게 구현한 클래스
    

    구  분	의  미
    왼쪽 법칙(left identity)	M.of(a).chain(f) == f(a)
    오른쪽 법칙(right identity)	m.chain(M.of) == m

11-2 Identity 모나드 이해와 구현

• 값 컨테이너(value container) : 타입 T를 가지는 값의 컨테이너
• identity
  • 함수형 프로그래밍에서 identity는 항상 다음처럼 구현하는 특별한 의미의 함수
    

    const identity = <T>(value: T): T => value

  • 카테고리 이론에서 자신의 타입에서 다른 타입으로 갔다가 돌아올 때 값이 변경되지 않는 카테고리를 의미

11-3 Maybe 모나드 이해와 구현

• Maybe 모나드
  • Maybe는 오류일 때와 정상적일 때를 모두 고려하면서도 사용하는 쪽 코드를 간결하게 작성할 수 있게 함
  • 데이터의 유무에 따라 코드가 적절하게 동작하도록 설계
  • Maybe 그 자체가 모나드가 아니라, Maybe가 제공하는 Just<T>와 Nothing 타입이 모나드
    

    export class Maybe<T> {
      static Just<U>(value: U) { return new Just<U>(value) }
      static Nothing = new Nothing
    }

  • 코드의 안정성을 함수형 방식으로 보장하기 위한 목적으로 설계

11-4 Validation 모나드 이해와 구현

• Validation 모나드
  • 데이터는 있는데 그 데이터가 유효한지를 판단하는 용도로 설계
  • Success와 Failure 두 가지 모나드로 구성

11-5 IO 모나드 이해와 구현

• IO 모나드 
  • 여러 개의 파일 입출력을 선언형 프로그래밍 방식으로 작성할 수 있게 고안

출처 : Do it! 타입스크립트 프로그래밍

10 제네릭 프로그래밍

10-1 제네릭 타입 이해하기

• 인터페이스나 클래스, 함수, 타입 별칭 등에 사용할 수 있는 기능으로,
  해당 심벌의 타입을 미리 지정하지 않고 다양한 타입에 대응하려고 할 때 사용

10-2 제네릭 타입 제약

• 제네릭 타입 제약(generic type constraint) : 타입 변수에 적용할 수 있는 타입의 범위를 한정하는 기능

10-3 대수 데이터 타입

• 객체지향 프로그래밍 언어에서 ADT라는 용어는 '추상 데이터 타입(abstract data type)을 의미하지만,
  함수형 언어에서는 대수 데이터 타입(algebraic data type)을 의미
• 합집합 타입(union type)
  • '또는(or)'의 의미인 '|' 기호로 다양한 타입을 연결해서 만든 타입
• 교집합 타입(intersection type)
  • '이고(and)'의 의미인 '&' 기호로 다양한 타입을 연결해서 만든 타입
• 식별 합집합(discriminated unions)
  • 타입스크립트에서 합집합 타입의 각각을 구분할 수 있게 하는 구문을 제공

10-4 타입 가드

• instanceof 연산자
  • 자바스크립트와는 다르게 '타입 가드(type guard)' 기능이 있음
  • 타입 가드는 타입을 변환하지 않은 코드 때문에 프로그램이 비정상으로 종료되는 상황을 보호해 준다는 의미
• is 연산자를 사용해 타입 가드 기능을 하는 함수를 구현할 수 있음

10-5 F-바운드 다형성

• 타입스크립트에서 this 키워드는 타입으로도 사용
  • this가 타입으로 사용되면 객체지향 언어에서 의미하는 다형성(polymorphism) 효과가 남
  • 일반적인 다형성과 구분하기 위해 this 타입으로 인한 다형성을 'F-바운드 다형성(F-bound polymorphism)'이라고 함
• F-바운드 타입
  • 자신을 구현하거나 상속하는 서브타입(subtype)을 포함하는 타입

10-6 nullable 타입과 프로그램 안전성

• nullable 타입 : undefined와 null 타입
  • 타입스크립트에서 undefined값의 타입은 undefined이고, null값의 타입은 null
  • 이 둘은 사실상 같은 것이므로 서로 호환
• nullable 타입들은 프로그램이 동작할 때 프로그램을 비정상으로 종료시키는 주요 원인
• 옵션 체이닝(optional chaining)
  • 옵션 체이닝 연산자 : ?. (세이프 내비게이션 연산자(safe navigation operator))
• 널 병합 연산자(nullish coalescing operator) : ??
• 펑터(functor) : map 메서드가 있는 타입

출처 : Do it! 타입스크립트 프로그래밍

09 람다 라이브러리

09-1 람다 라이브러리 소개

• compose나 pipe를 사용하는 함수 조합을 쉽게 할 수 있게 설계된 오픈소스 자바스크립트 라이브러리
  • 타입스크립트 언어와 100% 호환
  • compose와 pipe 함수 제공
  • 자동 커리(auto curry) 기능 제공
  • 포인트가 없는 고차 도움 함수 제공
  • 조합 논리(combinatory logic) 함수 일부 제공
  • 하스켈 렌즈(lens) 라이브러리 기능 일부 제공
  • 자바스크립트 표준 모나드 규격(fantasyland-spec)과 호환
• ramda 패키지 구성
  • 많은 도움 함수(utility function) 제공
    • 함수(function) : R.compose, R.pipe, R.curry 등 52개 함수
    • 리스트(list) : 배열을 대상으로 하는 R.map, R.filter, R.reduce 등 87개 함수
    • 로직(logic) : R.not, R.or, R.cond 등 불리언 로직 관련 17개 함수
    • 수학(math) : R.add, R.subtract, R.multiply, R.divide 등 수 관련 13개 함수
    • 객체(object) : R.prop, R.lens 등 객체와 렌즈 관련 49개 함수
    • 관계(relation) : R.lt, R.lte, R.gt, R.gte 등 두 값의 관계를 파악하게 하는 25개 함수
    • 문자열(string) : R.match, R.replace, R.split 등 문자열을 대상으로 정규식(regular expression) 등을 할 수 있게 하는 8개 함수
    • 타입(type) : R.is, RisNil, R.type 등 대상의 타입을 파악하게 하는 4개 함수

09-2 람다 기본 사용법

• R.range 함수
  • [최솟값, 최솟값 + 1, ..., 최댓값 - 1] 형태의 배열을 생성
• R.tap 디버깅용 함수
  • 2차 고차 함수 형태로 현재 값을 파악
• 자동 커리(auto curry)
  • 매개변수가 두 개인 일반 함수처럼 사용할 수도 있고 2차 고차 함수로 사용할 수 있음
• R.curryN 함수
  
  • N개의 매개변수를 가진 1차 함수(first function)를 N개의 커리(curry) 매개변수를 가지는 N차 고차 함수로 만듦

09-3 배열에 담긴 수 다루기

• 선언형 프로그래밍(declarative programming)
  • 모든 입력 데이터는 단순 데이터보다 배열 형태를 주로 사용
• R.addIndex 함수
  • Array.map은 두 번째 매개변수로 index를 제공하지만 R.map은 index 매개변수를 기본으로 제공하지 않음
  • R.addIndex 함수를 사용해 R.map이 index를 제공하는 새로운 함수를 만들어야 함
• R.flip 함수
  • R.subtract와 같은 2차 고차 함수의 매개변수 순서를 바꿔줌

09-4 서술자와 조건 연산

• 서술자(predicate)
  • 함수형 프로그래밍에서 boolean 타입 값을 반환해 어떤 조건을 만족하는지를 판단하는 함수
• R.not 함수
  • 입력값이 true이면 false를 반환하고 false이면 true를 반환하는 함수
• R.ifElse 함수
  • 세 가지 매개변수를 포함
    • 첫 번째 - true/false를 반환하는 서술자
    • 두 번째 - 선택자가 true를 반환할 때 실행할 함수
    • 세 번째 - 선택자가 false를 반환할 때 실행할 함수

09-5 문자열 다루기

• R.trim 함수 : 문자열 앞뒤의 공백을 제거
• R.toLower 함수 : 문자열에서 대문자를 모두 소문자로 전환
• R.toUpper 함수 : 소문자를 모두 대문자로 전환
• R.split 함수 : 구분자(delimiter)를 사용해 문자열을 배열로 바꿈

09-6 chance 패키지로 객체 만들기

• chance 패키지 : 그럴듯한 가짜 데이터를 만들어주는 라이브러리

09-7 렌즈를 활용한 객체의 속성 다루기

• 렌즈(lens)
  • 하스켈 언어의 Control.Lens 라이브러리 내용 중 자바스크립트에서 동작할 수 있는 게터(getter)와 세터(setter) 기능만을 람다 함수로 구현한 것
    1. R.lens 함수로 객체의 특정 속성에 대한 렌즈를 만든다
    2. 렌즈를 R.view 함수에 적용해 속성 값을 얻는다
    3. 렌즈를 R.set 함수에 적용해 속성 값이 바뀐 새로운 객체를 얻는다
    4. 렌즈와 속성 값을 바꾸는 함수를 R.over 함수에 적용해 값이 바뀐 새로운 객체를 얻는다
• R.prop과 R.assoc 함수
  • R.prop는 객체의 특정 속성 값을 가져오는 함수로서, 이런 동작을 하는 함수를 게터(getter)라고 함
  • 객체의 특정 속성 값을 변경하려면 R.assoc를 사용하는데, 이런 목적으로 사용하는 함수를 세터(setter)라고 함
• R.lensPath 함수
  • 람다 라이브러리에서는 객체의 이런 중첩 속성(nested property)을 '경로(path)'라고 함
  • 긴 경로의 속성을 렌즈로 만들 때 R.lensPath 함수를 사용

09-8 객체 다루기

• R.toPairs와 R.fromPairs 함수
  • R.toPairs 함수는 객체의 속성들을 분해해 배열로 만듦
  • R.fromPairs 함수는 [키:값] 형태의 아이템을 가진 배열을 다시 객체로 만듦
• R.keys와 R.values 함수
  • R.keys 함수는 객체의 속성 이름만 추려서 string[] 타입 배열로 반환
  • R.values 함수는 객체의 속성 값만 추려서 any[] 타입 배열로 반환
• R.zipObj 함수
  • '키 배열(속성 이름 배열)'과 '값 배열(속성에 설정할 값 배열)'이라는 두 가지 매개변수를 결합해 객체로 만듦
• R.mergeLeft와 R.mergedRight 함수
  • 두 개의 객체를 입력받아 두 객체의 속성들을 결합해 새로운 객체를 생성
  • Left, Right로 나뉜 이유는 '객체 1'과 '객체 2'가 서로 같은 이름의 속성이 있고, 값이 다를 때 어느 쪽 객체의 것을 선택할지 구분하기 위함
    • R.mergeLeft 함수는 왼쪽, 즉 '객체 1'의 값에 우선순위가 더 높음
    • R.mergeRight 함수는 '객체 2'의 우선순위가 더 높음
• R.mergeDeepLeft와 R.mergeDeepRight 함수
  • R.mergeLeft와 R.mergeRight 함수는 객체의 속성에 담긴 객체를 바꾸지는 못함
  • R.mergeDeepLeft와 R.mergeDeepRight 함수는 경로(path)의 속성 값들도 바꿀 수 있음

09-9 배열 다루기

• R.prepend와 R.append 함수
  • 기존 배열의 앞뒤에 새 아이템을 삽입한 새 배열을 만듦
• R.flatten 함수
  • 복잡한 배열을 1차원의 평평한 배열로 바꿔줌
• R.unnest 함수
  • R.flatten 함수보다 조금 정교하게 배열을 가공
• R.sort 함수
  • 배열의 타입이 number[]인 경우 내림차순이나 오름차순으로 정렬
• R.sortBy 함수
  • 특성 속성 값에 따라 정렬
• R.sortWith 함수
  • R.sortBy 함수는 항상 오름차순으로만 정렬
  • R.sortWith 함수는 R.ascned, R.descend 함수와 함께 사용되어 오름차순, 내림차순 정렬을 할 수 있음

09-10 조합 논리 이해하기

• 조합 논리학(combinatory logic)은 '조합자(combinator)'라는 특별한 형태의 고차 함수들을 결합해 새로운 조합자를 만들어 내는 것
• 이는 함수형 언어의 컴파일러를 만드는 데 필요한 이론을 검증하고 개발할 때 주로 사용
• 람다가 제공하는 조합자

• R.chain 함수
  • 함수를 매개변수로 받아 동작하는 함수
• R.flip 함수
  • 2차 고차 함수의 매개변수 순서를 서로 바꿔주는 역할
• R.identity 조합자
  • 가장 단순한 조합자이지만, 조합자의 구조상 반드시 함수가 있어야 하는 곳에 위치할 때 그 위력을 발휘
• R.always 조합자
  • 두 개의 고차 매개변수 중 첫 번째 것을 반환
  • constant라는 의미에서 'K-조합자'라고 하는데, 이때 K는 독일어로 'Konstante(상수)'를 의미
  • 두 개의 매개변수가 필요한 조합자에 마치 R.identity처럼 사용
• R.applyTo 조합자
  • 값을 첫 번째 매개변수로, 그리고 이 값을 입력으로 하는 콜백 함수를 두 번째 매개변수로 받아 동작
• R.ap 조합자
  • 콜백 함수들의 배열을 첫 번째 매개변수로, 배열을 두 번째 매개변수로 입력받는 2차 고차 함수
  • 콜백 함수가 한 개일 때는 마치 R.map 함수처럼 동작
  • 콜백 함수가 두 개일 때는 마치 R.chain(n => [n, n]) 형태로 동작

출처 : Do it! 타입스크립트 프로그래밍

08 함수 조합의 원리와 응용

08-1 함수형 프로그래밍이란?

• 순수 함수와 선언형 프로그래밍의 토대 위에
  함수 조합(function composition)과 모나드 조합(monadic composition)으로 코드를 설계하고 구현하는 기법
• 함수형 프로그래밍은 다음 세 가지 수학 이론에 기반을 두고 있음
  1. 람다 수학(ramda calculus) : 조합 논리와 카테고리 이론의 토대가 되는 논리 수학
  2. 조합 논리(combinatory logic) : 함수 조합의 이론적 배경
  3. 카테고리 이론(category theory) : 모나드 조합과 고차 타입의 이론적 배경

08-2 제네릭 함수

• 타입스크립트의 함수는 매개변수와 반환 값에 타입이 존재하므로, 함수 조합을 구현할 때는 제네릭 함수 구문을 사용

08-3 고차 함수와 커리

• 고차 함수(high-order function) : 또 다른 함수를 반환하는 함수
  • 1차 함수(first-order function) : 함수가 아닌 단순히 값을 반환하는 함수
  • 2차 고차 함수(second-order function) : 1차 함수를 반환하는 함수
  • 3차 고차 함수(third-order function) : 2차 함수를 반환하는 함수
• 부분 적용 함수(partially applied function) 또는 부분 함수(partial function)
  • 자신의 차수보다 함수 호출 연산자를 덜 사용한 경우
• 클로저(closure) : 지속되는 유효 범위(persistence scope)를 의미

08-4 함수 조합

• 함수 조합(function composition)
  • 작은 기능을 구현한 함수를 여러 번 조합해 더 의미 있는 함수를 만들어 내는 프로그램 설계 기법
  • compose 혹은 pipe라는 이름의 함수를 제공하거나 만들 수 있음
• compose 함수
• pipe 함수
  • compose와 매개변수들을 해석하는 순서가 반대
• 포인트가 없는 함수(pointless function)
  • map(f) 형태의 부분 함수를 만들면 compose나 pipe에 사용할 수 있음

출처 : Do it! 타입스크립트 프로그래밍

07 Promise와 async/await 구문

07-1 비동기 콜백 함수

• 비동기 콜백 함수(asynchronous callback function) : 비동기 API의 콜백 함수
• 콜백 지옥(callback hell) : 복잡한 형태로 얽힌 콜백 구조

07-2 Promise 이해하기

• 타입스크립트 Promise의 콜백 함수는 resolve와 reject 함수를 매개변수로 받는 형태
• Promise.resolve 메서드
  • Promise.resolve(값) 형태로 호출하면 항상 이 '값'은 then 메서드에서 얻을 수 있음
    

    01: Promise.resolve(1)
    02:   .then(value => console.log(value))
    03:
    04: Promise.resolve('hello')
    05:   .then(value => console.log(value))
    06:
    07: Promise.resolve([1, 2, 3])
    08:   .then(value => console.log(value))
    09:
    10: Promise.resolve({name: 'Jack', age: 32})
    11:   .then(value => console.log(value))

• Promise.reject 메서드
  • Promise.reject(Error 타입 객체)를 호출하면 이 'Error 타입 객체'는 항상 catch 메서드의 콜백 함수에서 얻을 수 있음
    

    01: Promise.reject(new Error('에러 발생'))
    02:   .catch((err: Error) => console.log('error: ', err.message))

• then-체인(then-chain)
  • Promise의 then 인스턴스 메서드를 호출할 때 사용한 콜백 함수는 값을 반환
  • then에서 반환된 값은 또 다른 then 메서드를 호출해 값을 수신할 수 있음
  • then 메서드는 반환된 값이 Promise 타입이면 이를 해소(resolve)한 값을 반환
    • 만약 거절(reject)당한 값일 때는 catch 메서드에서 이 거절당한 값을 얻을 수 있음
• Promise.all 메서드
  • Promise 객체들을 배열 형태로 받아, 모든 객체를 대상으로 해소(resolve)된 값들의 배열로 만듦
  • Promise 객체를 반환하므로 해소된 값들의 배열은 then 메서드를 호출해서 얻어야 함
  • 배열에 담긴 Promise 객체 중 거절(reject) 객체가 발생하면 더 기다리지 않고 해당 거절 값(reject value)을 담은 Promise.reject 객체를 반환
• Promise.race 메서드
  • 배열에 담긴 Promise 객체 중 하나라도 해소(resolve)되면 이 값을 담은 Promise.resolve 객체를 반환
    • 만약 거절 값이 가장 먼저 발생하면 Promise.reject 객체를 반환

07-3 async와 await 구문

• await 키워드
  • 피연산자(operand)의 값을 반환
  • 만약 피연산자가 Promise 객체이면 then 메서드를 호출해 얻은 값을 반환
• async 함수 수정자
  • await 키워드는 항상 async라는 이름의 함수 수정자(function modifier)가 있는 함수 몸통에서만 사용할 수 있음
  • 일반 함수처럼 사용할 수 있으며 Promise 객체로 사용할 수 있음

출처 : Do it! 타입스크립트 프로그래밍

06 반복기와 생성기

06-1 반복기 이해하기

• 반복기(iterator)
  1. next라는 이름의 메서드를 제공한다
  2. next 메서드는 value와 done이라는 두 개의 속성을 가진 객체를 반환한다
• 반복기 제공자(iterable) : 반복기를 제공하는 역할을 하는 함수

06-2 생성기 이해하기

• 생성기(generator) : function* 키워드로 만든 함수
• 세미코루틴(semi-coroutine, 반협동 루틴)
  • 단일 스레드(single-thread)로 동작하는 프로그래밍 언어가 마치 다중 스레드(multi-thread)로 동작하는 것처럼 보이게 하는 기능
• function* 키워드
  • 화살표 함수로는 생성기를 만들 수 없음
  • 생성기는 반복기를 제공하는 반복기 제공자로서 동작
• yield 키워드
  • 연산자(operator) 형태로 동작
  • 반복기를 자동으로 만들어 주며 반복기 제공자 역할도 수행
• yield* 키워드
  • yield는 단순히 값을 대상으로 동작하지만, yield*는 다른 생성기나 배열을 대상으로 동작

출처 : Do it! 타입스크립트 프로그래밍

05 배열과 튜플

05-1 배열 이해하기

• for...in 문
  

  01: let names = ['Jack', 'Jane', 'Steve']
  02:
  03: for(let index in names) {
  04:   const name = names[index]
  05:   console.log(`[${index}]: ${name}`)
  06: }

• for...of 문
  

  01: for(let name of ['Jack', 'Jane', 'Steve'])
  02:   console.log(name)

• 제네릭(generics) 타입 : 타입을 T와 같은 일종의 변수(타입 변수(type variable))로 취급하는 것
• 전개 연산자(spread operator)
  

  01: let array1: number[] = [1]
  02: let array2: number[] = [2, 3]
  03: let mergedArray: number[] = [...array1, ...array2, 4]
  04: console.log(mergedArray)

05-2 선언형 프로그래밍과 배열

• 명령형 프로그래밍(imperative programming)
  • 입력 데이터 얻기
  • 입력 데이터 가공해 출력 데이터 생성
  • 출력 데이터 출력
• 선언형 프로그래밍(declarative programming)
  • 문제를 푸는 데 필요한 모든 데이터 배열에 저장
  • 입력 데이터 배열을 가공해 출력 데이터 배열 생성
  • 출력 데이터 배열에 담긴 아이템 출력

05-3 배열의 map, reduce, filter 메서드

• filter 메서드
  

  filter(callback: (value: T, index?: number): boolean): T[]

• map 메서드
  

  map(callback: (value: T, index?: number): Q): Q[]

• reduce 메서드
  

  reduce(callback: (result: T, value: T), initialValue: T): T

05-4 순수 함수와 배열

• 순수 함수(pure function) : 부수 효과(side-effect)가 없는 함수
  
  • 함수 몸통에 입출력 관련 코드가 없어야 한다
  • 함수 몸통에서 매개변숫값을 변경시키지 않는다(즉, 매개변수는 const나 readonly 형태로만 사용한다)
  • 함수는 몸통에서 만들어진 결과를 즉시 반환한다
  • 함수 내부에 전역 변수나 정적 변수를 사용하지 않는다
  • 함수가 예외를 발생시키지 않는다
  • 함수가 콜백 함수로 구현되었거나 함수 몸통에 콜백 함수를 사용하는 코드가 없다
  • 함수 몸통에 Promise와 같은 비동기 방식으로 동작하는 코드가 없다
• 깊은 복사와 얕은 복사
  
  • 깊은 복사(deep-copy) : 대상 변숫값이 바뀔 때 원본 변숫값은 그대로인 형태로 동작
  • 얕은 복사(shallow-copy) : 얕은 복사가 된 배열의 내용을 변경하면 원본 배열 또한 변경

05-5 튜플 이해하기

• 튜플(tuple)
  
  • 보통 튜플을 사용할 때는 타입 별칭(alias)으로 튜플의 의미를 명확하게 함

출처 : Do it! 타입스크립트 프로그래밍

04 함수와 메서드

04-1 함수 선언문

• 자바스크립트 함수 선언문에서 매개변수와 함수 반환 값(return type)에 타입 주석을 붙이는 형태
• 매개변수와 반환 값에 대한 타입 주석을 생략할 수 있으나 생략되어 있으면 함수의 구현 의도를 알기 어려움
• void 타입
  • 값을 반환하지 않는 함수의 반환 타입
  • void 타입은 함수 반환 타입으로만 사용
• 함수 시그니처(function signature) : 함수의 타입
• type 키워드 : 기존에 존재하는 타입을 단순히 이름만 바꿔서 사용할 수 있음 - 타입 별칭(type alias)
• undefined 타입을 고려하여 코드 작성
  

  01: interface INameable {
  02:   name: string
  03: }
  04: function getName(o: INameable) {
  05:   return o != undefined ? o.name : 'unknown name'
  06: }
  07: 
  08: let n = getName(undefined)
  09: console.log(n)                        // unknown name
  10: console.log(getName({name: 'Jack'}))  // Jack

• 선택적 매개변수(optional parameter) : 함수의 매개변수에도 이름 뒤에 물음표를 붙여 사용

04-2 함수 표현식

• 함수 표현식(function expression)
  • 함수 선언문에서 함수 이름을 제외한 function(a, b) { return a + b }와 같은 코드
  • 함수형 언어의 핵심 기능
• 일등 함수(first-class function)
  • 함수와 변수를 구분(혹은 차별) 하지 않는다는 의미
    • 심벌 f가 변수인지 함수인지 사실상 구분할 수 없음 (변수와 함수를 차별하지 않는다는 의미)

    01: let f = function(a, b) { return a + b }
    02: f = function(a, b) { return a - b }

  • 함수형 프로그래밍 언어(functional programming language) : 일등 함수 기능을 제공하는 프로그래밍 언어
• 표현식(expression)
  • 리터럴(literal), 연산자(operator), 변수, 함수 호출(function call) 등이 복합적으로 구성된 코드 형태
  • 표현식은 항상 컴파일러에 의해 계산법(evaluation)이 적용되어 어떤 값이 됨
    • 조급한 계산법(eager evaluation)과 느긋한(또는 지연) 계산법(lazy evaluation)
• 함수 호출 연산자
  • 함수 호출 : 함수 표현식의 몸통 부분을 실행
  • 어떤 변수가 함수 표현식을 담고 있다면, 변수 이름 뒤에 함수 호출 연산자(function call operator) ( )를 붙여 호출
• 익명 함수
  • 함수 표현식은 대부분 언어에서 언급되는 익명(혹은 무명) 함수(anonymous function)의 다른 표현
• 함수 표현식을 담는 변수는 let보다는 const 키워드로 선언하는 것이 바람직

04-3 화살표 함수와 표현식 문

• ESNext 자바스크립트와 타입스크립트는 function 키워드가 아닌 => 기호로 만드는 화살표 함수도 제공
• 화살표 함수의 몸통은 function 때와는 다르게 중괄호를 사용할 수도 있고 생략할 수도 있음
  • 중괄호 사용 여부에 따라 타입스크립트 문법이 동작하는 방식이 달라짐
    • 실행문(execution statement) 방식
    • 표현식 문(expression statement) 방식
• ESNext와 타입스크립트는 실행문과 표현식 문을 동시에 지원하는 다중 패러다임 언어(multi-paradigm language)
• return 키워드
  • 함수 몸통을 복합 실행문으로 구현한 다음 함수는 true나 false를 반환하지 않음
    

    01: function isGreater(a: number, b: number): boolean {
    02:   a > b  // 결과를 반환하지 않음
    03: }

  • 실행문 기반 언어는 이 문제를 해결하려고 return 키워드를 도입
    • return 키워드는 반드시 함수 몸통에서만 사용할 수 있다는 제약이 있음

    01: function isGreater(a: number, b: number): boolean {
    02:   return a > b  // true나 false라는 결과를 반환
    03: }

• 표현식 문 스타일의 화살표 함수 구현
  • function 스타일 함수 isGreater를 화살표 함수로 구현
    

    01: const isGreater = (a: number, b: number): boolean => {
    02:   return a > b
    03: }

  • ESNext와 타입스크립트는 다음처럼 구현할 수 있음
    • 함수 몸통을 표현식으로 구현
    • 표현식은 값을 반환하는 실행문이므로 return 키워드 또한 생략

  01: const isGreater = (a: number, b: number): boolean => a > b

• 표현식과 표현식 문의 차이
  • 표현식(expression) : 실행문의 일부일 뿐 그 자체가 실행문인 것은 아님 (02행)
  • 표현식 문(expression statement) : 그 자체가 실행문(statement) (03행)
    

    01: let a = 1, b = 0
    02: if(a > b) console.log('a is greater than b')
    03: const isGreater = (a: number, b: number): boolean => a > b

04-4 일등 함수 살펴보기

• 콜백 함수(callback function) : 매개변수 형태로 동작하는 함수
• 중첩(nested) 함수 : 함수 안에 또 다른 함수를 중첩해서 구현
  

  01: const calc = (value: number, cb: (number) => void): void => {
  02:   let add = (a, b) => a + b
  03:   function multiply(a, b) { return a * b }
  04:
  05:   let result = multiply(add(1, 2), value)
  06:   cb(result)
  07: }
  08: calc(30, (result: number) => console.log(`result is ${result}`))

• 고차 함수(high-order function) : 또 다른 함수를 반환하는 함수
  

  01: const add = (a: number): (number) => number => (b: number): number => a + b
  02: const result = add(1)(2)
  03: console.log(result)

04-5 함수 구현 기법

• 디폴트 매개변수(default parameter) : 매개변수의 기본값
• 색인 가능 타입(indexable type) : {[key]: value} 형태의 타입
  

  01: export type KeyValueType = {
  02:   [key: string]: string
  03: }
  04: export const makeObject = (key: string, value: string): KeyValueType => ({[key]: value})
  05:
  06: console.log(makeObject('name', 'Jack'))
  07: console.log(makeObject('firstName', 'Jane'))

04-6 클래스 메서드

• function 키워드로 만든 함수에 this 키워드를 사용할 수 있으나 화살표 함수에는 this 키워드를 사용할 수 없음
• 이름 앞에 static 수정자(modifier)를 붙여 정적 메서드를 만들 수 있음
• 메서드 체인(method chain) : 객체의 메서드를 이어서 계속 호출하는 방식

출처 : Do it! 타입스크립트 프로그래밍

03 객체와 타입

03-1 타입스크립트 변수 선언문

• let과 const 키워드
  • let으로 선언한 변수는 코드에서 그 값이 수시로 변경될 수 있음을 암시
  • const 변수는 코드에서 변숫값이 절대 변하지 않는다는 것을 암시
  • ESNext는 var 키워드를 사용하지 말라고 권고
• 타입 주석(type annotation)
  

  01: let n: number = 1
  02: let b: boolean = true
  03: let s: string = 'hello'
  04: let o: object = {}

• 타입 추론(type inference)
  • 자바스크립트와 호환성을 위해 타입 주석 부분을 생략할 수 있음
  • 타입스크립트 컴파일러는 대입 연산자 = 오른쪽 값에 따라 변수의 타입을 지정
    

    01: let n = 1        // n의 타입을 number로 판단
    02: let b = true     // b의 타입을 boolean으로 판단
    03: let s = 'hello'  // s의 타입을 string으로 판단
    04: let o = {}       // o의 타입을 object로 판단

• any 타입
  • 자바스크립트와 호환을 위해 any라는 이름의 타입을 제공
  • 값의 타입과 무관하게 어떤 종류의 값도 저장할 수 있음
• undefined 타입
  • 타입스크립트에서 undefined는 타입이기도 하고 값이기도 함
  • 자바스크립트에서 undefined는 값 (변수를 초기화하지 않으면 undefined 값을 가짐)
• 템플릿 문자열(template string)
  • 역 따옴표(backtick) `로 문자열을 감싸고, 변수를 ${ } 기호로 감싸는 형태
    

    01: let count = 10, message = 'Your count'
    02: let result = `${message} is ${count}`
    03: console.log(result)  // Your count is 10

03-2 객체와 인터페이스

• object 타입은 인터페이스와 클래스의 상위 타입
• number, boolean, string 타입의 값을 가질 순 없지만 속성 이름이 다른 객체를 자유롭게 담을 수 있음
• 인터페이스 선언문
  
  • 객체의 타입을 정의할 수 있게 하는 interface 키워드 제공
  • 객체를 의미하는 중괄호 { }로 속성과 속성의 타입 주석을 나열하는 형태로 사용
• 선택 속성(optional property) 구문 : 속성 이름 뒤에 물음표 기호를 붙임
  

  01: interface IPerson {
  02:   name: string   // 필수 속성
  03:   age: number    // 필수 속성
  04:   etc?: boolean  // 선택 속성
  05: }
  06: let good1: IPerson = {name: 'Jack', age: 32}
  07: let good2: IPerson = {name: 'Jack', age: 32, etc: true}

• 익명 인터페이스(anonymous interface)
  • interface 키워드를 사용하지 않고 인터페이스의 이름도 없는 인터페이스
  • 주로 다음처럼 함수를 구현할 때 사용
    

    01: let ai: {
    02:   name: string
    03:   age: number
    04:   etc?: boolean
    05: } = {name: 'Jack', age: 32}
    06: function printMe(me: {name: string, age: number, etc?: boolean}) {
    07:   console.log(
    08:     me.etc ?
    09:       `${me.name} ${me.age} ${me.etc}` :
    10:       `${me.name} ${me.age}`
    11:   )
    12: }
    13: printMe(ai)  // Jack 32

03-3 객체와 클래스

• 객체지향 언어에서 흔히 볼 수 있는 class, private, public, protected, implements, extend 키워드 제공
• 문법적인 차이만 약간 있을 뿐 사실상 그 의미는 다른 언어와 같음
• public, private, protected와 같은 접근 제한자(access modifier)를 생략하면 public으로 간주
• 타입스크립트 클래스는 생성자(constructor)로 클래스의 속성을 선언할 수 있음
  

  01: class Person {
  02:   constructor(public name: string, public age?: number) {}
  03: }
  04: let jack: Person = new Person('Jack', 32)
  05: console.log(jack)  // Person { name: 'Jack', age: 32 }

• 인터페이스를 구현할 때 implements 키워드를 사용
• abstract 키워드를 사용해 추상 클래스를 만들 수 있음
• extends 키워드를 사용해 상속 클래스를 만듦

03-4 객체의 비구조화 할당문

• 구조화(structuring) : 인터페이스나 클래스를 사용해 관련된 정보를 묶어 새로운 타입으로 표현하는 것
• 비구조화(destructuring) : 구조화된 데이터를 분해하는 것
• 잔여 연산자(rest operator)
  

  01: let address: any = {
  02:   country: 'Korea',
  03:   city: 'Seoul',
  04:   address1: 'Gangnam-gu',
  05:   address2: 'Sinsa-dong 123-456',
  06:   address3: '789 street, 2 Floor ABC building'
  07: }
  08: const {country, city, ...detail} = address
  09: console.log(detail)

• 전개 연산자(spread operator)
  

  01: let part1 = {name: 'Jane'}, part2 = {age: 22}, part3 = {city: 'Seoul', country: 'Kr'}
  02: let merged = {...part1, ...part2, ...part3}
  03: console.log(merged)

03-5 객체의 타입 변환

• 타입 변환(type conversion) : 특정 타입의 변숫값을 다른 타입의 값으로 변환할 수 있는 기능
  • 타입스크립트는 타입 변환이 아닌 타입 단언(type assertion)이라는 용어를 사용

출처 : Do it! 타입스크립트 프로그래밍

01 타입스크립트와 개발 환경 만들기

01-1 타입스크립트란 무엇인가?

01-2 타입스크립트 주요 문법 살펴보기

• 타입스크립트는 ESNext 문법을 대부분 지원
• 타입스크립트 고유의 문법
  • 타입 주석(type annotation)과 타입 추론(type inference)
    

    01: let n: number = 1  // 타입 주석
    02: let m = 2          // 타입 추론 : 대입 연산자(=)의 오른쪽 값을 분석해 왼쪽 변수의 타입을 결정

  • 인터페이스
    

    01: interface Person {
    02:   name: string
    03:   age?: number
    04: }
    05:
    06: let person: Person = { name: "Jane" }

  • 튜플(tuple)
    

    01: let numberArray: number[] = [1, 2, 3]                   // 배열
    02: let tuple: [boolean, number, string] = [true, 1, 'OK']  // 튜플

  • 제네릭 타입(generic type)
    

    01: class Container<T> {
    02:   constructor(public value: T) { }
    03: }
    04: let numberContainer: Container<number> = new Container<number>(1)
    05: let stringContainer: Container<string> = new Container<string>('Hello World')

  • 대수 타입(algebraic data type) : 다른 자료형의 값을 가지는 자료형을 의미
    

    01: type NumberOrString = number |string   // 합집합 타입(union 또는 sum type) 예
    02: type AnimalAndPerson = Animal &Person  // 교집합 타입(intersection 또는 product type) 예

01-3 타입스크립트 개발 환경 만들기

02 타입스크립트 프로젝트 생성과 관리

02-1 타입스크립트 프로젝트 만들기

• tsconfig.json 파일 생성
  • 타입스크립트 컴파일러의 설정 파일
  • tsc --init 명령으로 생성
    

    01: {
    02:   "compilerOptions": {
    03:     "module": "commonjs",
    04:     "esModuleInterop": true,
    05:     "target": "es5",
    06:     "moduleResolution": "node",
    07:     "outDir": "dist",
    08:     "baseUrl": ".",
    09:     "sourceMap": true,
    10:     "downlevelIteration": true,
    11:     "noImplicitAny": false,
    12:     "paths": { "*": ["node_modules/*"] }
    13:   },
    14:   "include": ["src/**/*"]
    15: }

• package.json 수정
  • 개발이 완료되면 타입스크립트 소스코드를 ES5 자바스크립트 코드로 변환해 node로 실행
  • 이를 위해 package.json 파일 내 script 항목에 dev와 build 명령 추가

02-2 모듈 이해하기

• 모듈(module) : index.ts와 같은 소스 파일
• 모듈화(modulization) : 코드 관리와 유지, 보수를 위해 모듈마다 고유한 기능을 구현하는 방식
• export 키워드 : 기능을 제공하는 쪽에서 사용
  • function 키워드 외에도 interface, class, type, let, const 키워드 앞에도 붙일 수 있음
• import 키워드 : 다른 모듈의 기능을 이용하는 쪽에서 사용
  

  import { 심벌 목록 } from '파일의 상대 경로'  // 가장 기본적인 형태
  import * as 심벌 from '파일 상대 경로'

• export default 키워드
  • 한 모듈이 내보내는 기능 중 오직 한 개에만 붙일 수 있음
  • import문으로 불러올 때 중괄호 { } 없이 사용할 수 있음

02-3 tsconfig.json 파일 살펴보기

• module 키
  • 동작 대상 플랫폼이 웹 브라우저인지 노드제이에스인지를 구분해 그에 맞는 모듈 방식으로 컴파일하려는 목적
• moduleResolution 키
  • module 키의 값이 commonjs이면 moduleResolution 키값은 항상 node로 설정
  • module 키의 값이 amd이면 moduleResolution 키값은 classic으로 설정
• target 키
  • 트랜스파일할 대상 자바스크립트의 버전을 설정
  • 대부분 es5를 키값으로 설정 (최신 버전의 노드제이에스를 사용한다면 es6 설정)
• baseUrl과 outDir 키
  • 트랜스파일된 ES5 자바스크립트 파일을 저장하는 디렉터리를 설정
• paths 키
  • 소스 파일의 import문에서 from 부분을 해석할 때 찾아야 하는 디렉터리를 설정
• esModuleInterop 키
  • 웹 브라우저에서 동작한다는 가정으로 만들어진 오픈소스 자바스크립트 라이브러리를 사용하기 위함
• sourceMap 키
  • 키값이 true이면 트래스파일 디렉터리에는 .js.map 파일 생성
  • 변환된 자바스크립트 코드가 타입스크립트 코드의 어디에 해당하는지 알려주며 주로 디버깅할 때 사용
• downlevelIteration 키
  • 생성기(generator) 구문이 정상적으로 동작하려면 키값을 true로 설정
• noImplicitAny 키
  • 타입 미지정 시 오류를 무시하기 위해 false로 설정

출처 : Do it! 타입스크립트 프로그래밍