회사에서 그동안은 자바스크립트만 사용했는데,
앞으로는 타입스크립트로 프로젝트를 진행할 예정이라고 해서..
슬슬 공부해야할 타이밍이라고 생각이 들어 책을 구매했다!!

사실 이전에도 조금조금씩 타입스크립트를 써보기도 하고 공부도 했는데
책 하나 쯤은 정독하면 더 좋지 않을까 하는 마음에..ㅎㅎ..
꼭 끝까지 마스터해보는걸로..!

타입스크립트

Microsoft에서 관리/개발하는 오픈소스 프로그래밍 언어
자바스크립트의 상위 호환 언어

특징

동적 타입 언어? 정적 타입 언어?

특징을 말하기 전에 동적 타입 언어와 정적 타입 언어에 대한 이해가 필요할 것 같다.

정적 타입 언어

컴파일 시 변수의 타입이 결정되는 언어

코드를 작성할 때 변수의 타입을 지정해서 작성해줘야한다.
컴파일 시 타입에 맞지 않는 값이 들어있는 경우 컴파일 에러가 발생한다.
따라서 타입 에러로 인한 문제점을 미리 방지할 수 있다.

Java, C언어가 대표적인 정적 타입 언어이다.

동적 타입 언어

런타임에서 변수의 타입이 결정되는 언어

변수를 선언할 때 따로 타입을 명시하지 않고 자유롭게 값을 넣을 수 있다.
타입에 대한 결정을 런타임까지 지연시킬 수 있어서 유연성이 높다.
하지만 그렇기 때문에 실행 도중에 타입에러가 발생할 수 있다.

Python, Javascript가 대표적인 동적 타입 언어이다.

타입스크립트를 사용하는 이유

1. 정적 타입 언어라서

타입스크립트는 Javascript에서 타입을 명시하는 언어이다.
따라서 정적 타입 언어라고 할 수 있다.

정적 타입의 언어라는 것이 하나의 특징이자 타입스크립트를 쓰는 이유이다.
자바스크립트는 동적 언어라서 런타임까지 가서야 타입 에러를 알 수 있지만, 타입스크립트는 그 전에 알 수 있기 때문이다.
코드의 가독성을 높여줄 뿐만 아니라 디버깅도 쉬워진다.

2. IDE가 자바스크립트보다 더 많은 기능을 지원

IDE와 같은 도구에 타입 정보를 제공함으로써 높은 수준의 인텔리센스(IntelliSense), 코드 어시스트, 타입 체크, 리팩토링 등을 지원받을 수 있어서 더 높은 생산성을 발휘할 수 있다.

3. ES6/ESNext 지원

타입스크립트 자체가 ES5, ESNext의 문법을 모두 포함하는 언어라서 최신 표준을 지원한다.

거기에 타입, 인터페이스, 데코레이터, 클래스 멤버 변수, 제네릭, public, private과 같은 키워드를 추가로 제공한다.

이런 이유로 타입스크립트를 많이 사용하고 있다..!

트랜스파일

ESNext 자바스크립트 코드는 바벨이라는 트랜스파일러를 거쳐 ES5 코드로 변환되는데,
타입스크립트 코드는 TSC(TypeScript Compiler)라는 트랜스파일러를 통해 
ES5 코드로 변환된다.

타입스크립트 주요 문법

책에서 여러 문법을 소개해주고 있는데,
ESNext 문법과 타입스크립트의 고유 문법을 나눠서 소개하고 있다.
그 중에서 잘 몰랐던 것만 확인해보자..!

ESNext 문법

생성기

yield문을 이용해 반복기를 만들어내는 반복기 제공자

타입스크립트는 물론 파이썬이나 PHP같은 언어에는 yield라는 키워드가 있다.
yield문은 반복자를 의미하는 반복기(iterator)를 생성할 때 사용한다.
이 반복기는 독립적으로 존재하지 않고 반복기 제공자(iterable)을 통해 얻을 수 있는데,
이처럼 yield문을 이용해 반복기를 만들어내는 반복기 제공자를 생성자(generator)라고 한다.

generator는 function 키워드에 *를 결합한 function*과 yield 키워드를 이용해 만든다.
타입스크립트에서 yield는 반드시 function*으로 만들어진 함수 내부에서만 사용할 수 있다.

01: function* gen() {  // 생성기(generator)
02:   yield* [1,2]
03: }
04: for ( let value of gen()) { console.log(value); } // 1, 2

yield가 호출되면 프로그램의 실행이 02행에서 일시 정지한 후 04행으로 점프해 실행된다.
04행의 실행을 마치면 다시 02행으로 돌아가 실행하고,
02행의 배열의 요소를 모두 순회할 때까지 반복하는 실행흐름을 보여준다.

타입스크립트 고유 문법

타입 주석과 타입 추론

let x: number = 10;
let y = 20; 

타입스크립트에서는 변수 뒤에 콜론(:)고 타입명을 적는데, 이것을 타입 주석(type annotation)이라고 한다.

그런데, y를 선언하는 부분처럼 타입을 생략할 수도 있다.
이런 경우 대입되는 값을 분석해 타입으로 결정한다.
이것을 타입 추론(type inference)이라고 한다.
타입 추론이 이루어진 후에는 해당 변수에는 해당 타입의 값만 저장할 수 있다.

타입 추론은 자바스크립트와의 호환성을 보장하는 데에 큰 역할을 해준다.

인터페이스

interface Person {
  name: string
  age?: number
}

나중에 자세히 다루기로..

튜플

튜플은 파이썬을 공부했을 때 봤었는데 타입스크립트에도 튜플이 있다고 한다.

튜플은 물리적으로는 배열과 같은데,
배열에 저장되는 아이템의 데이터 타입이 모두 같으면 배열,
다르면 튜플이다.

let numberArray: number[] = [1, 2, 3];  // 배열
let tuple: [boolean, number, string] = [true, 10, 'hello'];  // 튜플

제네릭 타입 (generic type)

제네릭 타입은 다양한 타입을 한번에 취급할 수 있게 해준다.

class Container<T> {
  constructor(public value: T) {}
}
let numberContainer: Container<number> = new Container<number>(1);
let stringContainer: Container<string> = new Container<string>('Hello');

Container 클래스는 value 속성을 포함한다.
이 클래스는 Container<number>, Container<string>, Container<boolean>처럼 여러 가지 타입을 대상으로 동작할 수 있는데,
이것을 제네릭 타입이라고 한다.

대수 타입

Algebraic Data Type(ADT, 대수 타입)이란 다른 자료형의 값을 가지는 자료형을 의미한다. (...@_@)

대수 타입에는 크게 합집합 타입(union 또는 sum type)과
교집합 타입(intersection 또는 product type)이 있다.

type NumberOrString = number |string  // 합집합 타입 예시
type AnimalAndPerson = Animal &Person  // 교집합 타입 예시

참고

- Do it! 타입스크립트 프로그래밍 (책)
- https://post.naver.com/viewer/postView.nhn?volumeNo=29558570&memberNo=10381152
- https://poiemaweb.com/typescript-introduction