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

아이템 1. 타입스크립트 와 자바스크립트 관계 이해하기

• 타입스크립트는 자바스크립트의 상위 집합이다.
• js 프로그램에서 문법 오류가 없다면, 유효한 타입스크립트 프로그램이라고 할 수 있다.
• main.js 라는 자바스크립트 파일에 문법적인 오류가 없다면, main.ts로 고쳐도 잘 동작한다.
• 타입스크립트 프로그램이지만 자바스크립트가 아닌 부분은 존재한다. 타입을 명시하는 추가적인 문법을 가지기 때문.

• 타입스크립트의 목표는 런타임 전에 오류를 미리 찾아내는 것이다.
• 타입 체커를 통과하지만 런타임 오류를 발생시키는 코드도 존재한다.

• 타입스크립트 타입 시스템은 자바스크립트의 런타임 동작을 '모델링'한다.

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

• 타입스크립트 설정은 커맨드 명령어 또는, tsconfig.json 설정 파일에서 할 수 있다.
• 가급적 tsconfig.josn을 사용하자. 설정값을 공유하기 쉽다.

• 타입스크립트의 설정은 대부분 어디서 소스 파일을 찾을지, 어떤 종류의 출력을 생성할지 제어하는 내용이 대부분이다.

• noImplicitAny 설정
• 변수들이 반드시 미리 정의된 타입을 가져야 하는지 여부를 제어한다.
• 무조건 설정하자.

• strictNullChecks
• null과 undefined를 모든 타입에서 허용할 것인지 설정

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

• 타입스크립트 컴파일러는 두 가지 역할을 수행한다
• 최신 TS/JS를 브라우저에서 동작할 수 있도록 구버전의 자바스크립트로 트랜스파일 한다.
• 코드의 타입 오류를 체크한다.

• 이 둘은 완벽히 독립적이다.
• ts를 js로 변환할 때 타입이 영향을 미치지 않는다.
• 컴파일은 타입 체크와 독립적으로 동작하기 때문에, 타입 오류가 있는 코드도 컴파일이 가능하다.

• 런타임에서는 타입 체크가 불가능하다.
• typeof 같은 구문으로 타입을 확인할 수 없다. (typeof는 런타임에 실행되기 때문)
• 자바스크립트로 컴파일되는 과정에서 모든 인터페이스, 타입, 타입 구문은 제거된다.
• 타입 정보를 유지하기 위해 런타임에 접근 가능한 타입 정보를 명시적으로 저장하는 태그 기법이 있다.

interface Square {
	kind: 'square';
	width: number;
}

if(shape.kind === 'square') {...}

• 또는 타입을 클래스로 선언하는 기법도 있음.
• instanceof 로 체크

• 타입 연산은 런타임에 영향을 주지 않는다.
• 값을 정제하기 위해서는 런타임의 타입을 체크해야 하고 자바스크립트 연산을 통해 변환을 수행해야 한다.

• 런타임 타입은 선언된 타입과 다를 수 있다.

• 타입스크립트 타입으로는 함수 오버로드 불가능

• 타입스크립트 타입은 런타임 성능에 영향을 주지 않는다.

아이템 4 구조적 타이핑에 익숙해지기

• 자바스크립트는 덕타이핑 기반이다.
• 함수의 매개변수 값이 모두 제대로 주어진다면, 그 값이 어떻게 만들어졌는지 상관하지 않는다.

interface Vector2D {
  x: number;
  y: number;
}

interface Vector3D {
  x: number;
  y: number;
  z: number;
}

function calculateLength(v: Vector3D) {
  return Math.sqrt(v.x * v.x + v.y * v.y);
}

function normalize(v: Vector3D) {
  const length = calculateLength(v);

  return {
    x: v.x / length,
    y: v.y / length,
    z: v.z / length,
  };
}

console.log(normalize({ x: 3, y: 4, z: 5 }));

• ts에선 위 코드가 작동한다.
• calculateLength는 2D벡터틀 파라미터 타입으로 받지만 3D벡터가 인자로 들어갔을 때 에러를 잡아내지 못한다.
• Vector3D에선 x, y값이 둘 다 있기 때문에 Vector2D와 호환되었기 때문이다.

• 버그가 발생할 수 있지만, 유닛 테스팅에서 편한 점 도 존재함.

아이템 5 any 타입 지양하기

• any를 사용하면 타입스크립트의 장점을 누릴 수 없으니 일부 특별한 경우가 아니면 지양하자
• 타입안정성이 없다.
• 함수에서 약속한 리턴값의 타입을 무시한다.
• 자동완성 기능이 실행되지 않음
• 타입 시스템의 신뢰도를 떨어뜨린다. → 타입 체커가 오류를 잡아주지 못하기 때문에