해당 포스팅은 인사이트의 이펙티브 타입스크립트라는 책을 독학하며 기록하는 글입니다.

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

타입스크립트는 자바스크립트의 상위집합(superset)이다. 이는 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이라고 할 수 있다는 것이다.

하지만 이 명제의 역은 항상 '참'을 나타내지 않는다.

  • 모든 자바스크립트 프로그램은 타입스크립트 프로그램이다. -
  • 모든 타입스크립트 프로그램은 자바스크립트 프로그램이다. - 거짓

왜 역의 경우에는 거짓일까? 타입스크립트에서는 자바스크립트에서는 없는 타입을 명시하는 추가적인 문법을 가지고 있기 때문이다.

// example.ts
const name: string = 'Matthias';
// example.js
const name: string = 'Matthias';
		  ^
  		  SyntaxError: Unexpected token

타입스크립트는 비단 타입값의 오류만 잡아주는 것이 아니다. 다음 코드를 보자.

let city = 'Seoul';
console.log(city.toUppercase());
				 ^
                 Error: 'toUppercase' 속성이 'string' 형식에 없습니다.

이렇게 타입스크립트는 런타임에 오류를 발생시킬 코드를 미리 찾아내는데, 이런 이유로 타입스크립트를 '정적' 타입 시스템이라고 하는 것이다.

근데 이 코드에서 우리는 city라는 변수가 string 타입이라는 것을 명시하지 않았는데 타입스크립트는 어떻게 string 타입이라는 것을 알았을까?

  • '타입 추론' 이라는 기능 때문인데 이후에 좀 더 자세히 알아보자.

타입스크립트 타입 시스템은 자바스크립트의 런타임 동작을 '모델링'하는데, 이는 타입스크립트 타입 시스템의 기본 원칙이다.
예를 들어 다음 코드는 다른 언어였다면 런타임 에러가 났을 것이다.

const x = 2 + '3';

하지만 타입스크립트에서는 오류가 나지 않는다. 바로 자바스크립트에서 위의 코드는 아래 원칙에 의해 '23'이라는 문자열로 정상동작 하기때문이다.

'+' 연산자의 두 피연산자 중 한 피연산자라도 문자열이라면 다른 피연산자도 문자열로 변환해 연산한다.

반대로 정상동작하는 코드에 대해서 오류를 표시하는 경우도 있다. 이렇듯 타입스크립트를 사용한다고 모든 정적 타입의 정확성을 보장해 줄거라고 생각하면 안 된다.

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

타입스크립트의 설정은 100여개나 될 정도로 많은데, 이는 tsconfig.json 파일을 이용해 설정할 수있다. 동료들이나 다른 도구들이 타입스크립트를 어떻게 사용할 계획인지 알게하기 위해 설정 파일을 사용하는 것이 좋다.

설정 파일은 커맨드 라인에서 tsc --init 명령어를 통해 쉽게 생성할 수 있다.

이때 다른 설정들은 재처 놓더라도 프로젝트를 처음 시작한다면 noImplicitAnystrictNullChecks는 꼭 설정하도록 하자.

noImplicitAny

타입스크립트는 타입을 명시하지 않으면 암묵적으로 타입을 Any로 추론하는데, 이를 허용하지 않겠다는 것이다. 물론 더 분명한 타입을 사용하면 좋겠지만 그게 어렵다면 Any라도 명시적으로 표현해줘야 한다.
이 설정을 해제하는 상황은 자바스크립트로 되어 있는 기존의 프로젝트를 타입스크립트로 전환하는 상황에만 필요하다.

function add(a, b) {
  			 ^
             Error: 'a' 매개변수에는 암시적으로 'any' 형식이 포함됩니다.
  return a + b;
}

strictNullChecks

null이나 undefined가 모든 타입에서 허용될지를 설정하는 것으로 이를 사용하지 않는다면 "undefined는 객체가 아닙니다"라는 런타임 오류를 끊임없이 겪을 것이다.

// strictNullChecks 해제시
const name: string = undefined

// strictNullChecks 설정시
const name: string = undefined
	  ^
      Error: 'undefined' 형식은 'string' 형식에 할달할 수 없습니다.

만약 설정하고도 null이나 undefined를 사용하고 싶다면 |를 사용해 명시적으로 나타내주거나 이를 체크하는 코드를 추가해줘야 한다.


만약 모든 설정을 체크하고 싶다면 strict 설정을 하면 된다. 그럼 대부분의 오류를 잡아내게 된다. 만약 내 컴퓨터에서는 잘 동작하는 타입스크립트 파일을 동료에게 줬는데 동료의 컴퓨터에서 오류가 난다면 타입스크립트 설정이 동일하지 확인해봐야 한다. (보통 설정 파일은 github에 올라가지 않기 때문에)

profile
I Will be Relaxed Person

0개의 댓글