타입스크립트

타입스크립트의 특징과 장단점에 대해 알아본다.

타입스크립트란?

타입스크립트는 정적 타입 검사기이다. 코드를 실행하지 않고 타입에 기반해 오류를 확인한다.

타입스크립트의 특징

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

모든 자바스크립트 구문은 타입스크립트에서 유효하다.

좀 더 자세히 설명하면, 타입스크립트는 자바스크립트의 타입 상위 집합(typed superset)이다. 타입에 대한 규칙이 추가된다.

이 코드는 자바스크립트에서는 오류가 발생하지 않는다. area에 NaN이 저장될 뿐이다. 하지만 타입스크립트에서는 이를 실수로 보고 오류를 발생시킨다.

다음은 자바스크립트에서는 오류가 발생하지 않는 또 다른 예이다.

console.log(4 / []);

어떤 값이 나올지 예상되는가? 정답은 Infinity다. 빈 배열은 0으로 형변환되어 이런 결과가 나온다.

console.log(4 / []); // Infinity

자바스크립트 구문 상으로는 문제가 없지만, 이는 대부분 프로그래밍 실수이다.

타입스크립트의 타입 검사기는 프로그램에서 일반적인 오류를 가능한 많이 찾아내며 프로그램을 올바르게 만들도록 도와준다.

원한다면 tsconfig.json 파일에서 검사의 엄격성을 조정할 수 있다.

물론 수많은 옵션에서 원하는 것을 찾으려면 구글 검색이나 문서 확인이 필요하다.

마지막으로 컴파일된 자바스크립트 파일에서는 타입 정보가 없다. 타입스크립트는 런타임에 관여하지 않는다.

function sum(a: number, b: number): number {
    return a + b;
}

위 타입스크립트 코드는 다음과 같이 컴파일된다.

function sum(a, b) {
    return a + b;
}

함수의 매개변수와 반환값의 타입 정보는 물론이고, 타입스크립트만의 interface, type 등 타입과 관련된 모든 코드들은 컴파일 후에 모두 지워진다.

하지만 클래스나 enum과 같은 예외들이 존재하기도 한다.

타입스크립트의 장단점

타입스크립트를 사용하면서 내가 느꼈던 장단점을 정리해 보았다.

장점

• VSCode의 IntelliSense에 표시되는 자동 완성, 타입 정보, 시그니처 도움 - 복잡한 객체나 함수의 형태를 매번 확인할 필요가 없어진다.
• 지속가능성 - 프로젝트가 복잡해져도 타입스크립트와 함께라면 개발을 계속할 수 있다. 런타임에서 오류가 발생하는지 확인할 필요 없이, 타입스크립트로 코드에 문제가 없는지 미리 확인할 수 있다.

단점

• 타입에 매몰될 수 있음 - 문제가 없는 코드이지만 타입스크립트에서 오류가 발생하지 않게 만들어야 한다. 코드 구현보다 타입 지정에 더 많은 시간이 걸릴 수 있다.
• 타입을 알 수 없는 값 - 외부에서 오는 값, 사용자가 입력한 값, Express.js의 req에 대해서는 대해서는 단언이나 as를 사용할 수 밖에 없다. 대안으로 유효성 검사기(Zod, Yup)를 사용할 수 있다.