DublinCity

DublinCity

// myFirstTypescript.ts
const str: string = "happy CODEing";

class Coffee {
  private name: string;
  private temperature: string;
  constructor(name: string, temperature: string) {
    this.name = name;
    this.temperature = temperature;
  }

DublinCity

Item1: 타입스크립트와 자바스크립트의 관계

TL; DR

• 자바스크립트 코드를 작성할때도 타입체커는 유용하다.
• 타입스크립트로 코드를 작성하게 되면, 코드의 의도를 분명하게하고 타입체커를 이용해 훨씬 더 많은 오류를 찾아낼 수 있다.

---

타입스크립트는 자바스크립트의 상위집합(super set)이다.

DublinCity

Item2: 타입스크립트 설정

타입스크립트의 설정은 어디서 소스파일을 찾을지, 어떤 종류의 출력을 생성할지 제어하는 내용뿐 아니라 언어자체의 핵심요소를 제어하는 설정도 있다.

타입스크립트의 설정을 관리하는 법

아래 코드와 같이 설정값을 컴파일 시에 넘길 수 있으나, 동료 개발자와 설정을 공유하기가 어렵다.

DublinCity

Item3: 코드 생성과 타입이 관계없음을 이해하기

타입스크립트 컴파일러의 역할

타입스크립트 컴파일러는 완벽히 독립적인 두가지 일을 한다.

• 최신 타입스크립트/자바스크립트를 구버전의 자바스크립트로 트랜스 파일
• 코드의 타입오류를 체크

따라서, 타입스크립트에서는 C나 Java와 다르게 타입오류가 있는 코드도 컴파일이 가능하다.

DublinCity

Item50: 오버로딩 타입보다 조건부 타입 사용하기

간단하게 number 와 string 타입의 매개변수를 받아 두개를 더하는 함수를 생각해보자

시도 1

호기롭게 아래와 같이 작성해본다.

function double(input: string|number): string|number {
    return input+input // type error
}

DublinCity

Item4: 구조적 타이핑에 익숙해지기

자바스크립트는 덕 타이핑 기반이다. 덕 타이핑이란, 객체가 어떤 타입에 부합하는 변수와 매서드를 가질경우 객체를 해당 타입에 속하는 것으로 간주하는 방식이다. 타입스크립트는 이를 모델링 하기 위해서 구조적 타이핑을 사용한다.

아래 코드를 보면 Vector 와 Square 간의 관계를 전혀 선언하지 않았지만 타입을 넘겨줄 수 있다.

interface Vector {

DublinCity

Item5: any 타입 지양하기

타입선언을 추가하는데 시간을 쏟고 싶지 않아서 any 를 쓴다면 타입스크립트의 많은 장점을 누리지 못한다.

any타입은 안전성이 없다.

아래 코드처럼 any 타입은 타입체크를 무시한다.

let age: number

DublinCity

Item6: 편집기를 사용해 타입시스템 탐색하기

타입스크립트를 설치하면 다음 두가지를 할 수 있다

• 타입스크립트 컴파일러를 실행(tsc) TS -> JS
• 단독으로 실행할 수 있는 타입스크립트 서버(tsserver)

결론

• 타입스크립트 언어서비스를 적극 활용해야한다.
• 타입스크립트가 동작을 어떻게 모델링 하는지 알기 위해서 타입선언파일을 찾아본다.

DublinCity

Item9: 꼭 필요한 경우 타입단언을 사용하기

타입체커는 선언된 타입이 해당 인터페이스를 만족하는지 검사한다. 하지만 타입 단언은 강제로 타입을 지정하여 타입체커가 오류를 무시하도록 한다. 따라서 꼭 필요한 경우에만 사용해야한다

화살표 함수의 반환 타입 선언하기

화살표 함수에서 반환되는 값의 타입이 모호할 때가 있다.