[이펙티브 타입스크립트 | 1장] 타입스크립트 알아보기

 

1장 타입스크립트 알아보기

 

💻 들어가기 전,

 

타입스크립트는 인터프리터 언어 (파이썬, 루비)로 실행되는 것이 아니고, 저수준 언어로 컴파일(자바, 씨언어) 되는 것도 아니다.

또 다른 고수준 언어인 자바스크립트로 컴파일 되며, 실행 역시 타입스크립트가 아닌 자바스크립트로 이루어진다.

그렇기 때문에 자바스크립트와의 관계가 매우 중요하다.

 

인터프리터 언어, 저수준 언어, 고수준 언어 

 

1 . 자바스크립트와 타입스크립트의 관계

 

타입스크립트는 흔히 자바스크립트의 타입이 추가 된 상위 집합이라고 생각한다. 

그러나 반은 맞고, 반은 틀리다. 

 

모든 자바스크립트는 타입스크립트에 포함되지만, 일부의 자바스크립트만이 타입 체크에 통과하기 때문이다. 

오류를 뱉어낼 수 있는 자바스크립트를 타입스크립트를 사용함으로서 예방이 가능하기 때문에 타입스크립트로 마이그레이션 하는 것은 굉장한 이점을 가진다.

 

타입스크립트는 타입에 대한 오류를 잡아낼 순 있으나 오타를 검토해줄 순 없다.

 

 

 

2. 타입스크립트 설정 이해하기

 

tsconfig.json 파일에서 타입스크립트와 관련된 다양한 설정을 할 수 있다.

 

- noImplicitAny

변수들이 미리 정의된 타입을 가져야하는지에 대한 여부를 결정한다. 만약 false 로 설정이 되어있다면 any 타입이어도 괜찮다는 의미가 된다. (any로 명시해주지 않아도 암묵적으로 any 타입이 할당된다.) 따라서 false로 설정하는 경우는 기존 프로젝트를 타입스크립트로 마이그레이션하는 경우에만 사용한다.

 

- strictNullChecks

null 과 undefined가 모든 타입에서 허용되는지 확인하는 설정이다.

let num:number=null

위의 코드는 오류가 떠야 정상이지만, strictNullCheck 설정이 false로 되어 있다면 오류가 없다고 뜬다.

 

 

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

 

3.  구조적 타이핑에 익숙해지기

interface Vector2D {
  x: number
  y: number
}

function calcLength(v: Vector2D) {
  return Math.sqrt(v.x * v.x + v.y * v.y)
}

interface Vector2DWithName extends Vector2D {
  name: string
}

const a: Vector2DWithName = { name: 'hi', x: 5, y: 10 }
calcLength(a) // works fine

interface Vector2DName {
  name: string
  x: number
  y: number
}

const b: Vector2DName = { name: 'hello', x: 10, y: 10 }
calcLength(b) // works fine, too.