타입스크립트는 자바스크립트에 타입을 부여한 언어다. 자바스크립트의 확장된 언어라고 볼 수 있다. 타입스크립트를 브라우저에서 실행하려면 파일을 한 번 변환해줘야 한다. 이 변환 과정을 컴파일(정확히는 트랜스파일링)이라고 부른다.
참고로 Babel은 자바스크립트의 최신 문법을 최대한 많은 브라우저에서 호환할 수 있도록 변환해주는 도구다.
아래 2가지 관점에서 JS 코드 품질과 개발 생산성을 높일 수 있다.
아래 두 코드 모두 두 숫자의 합을 구하는 함수다. 위는 자바스크립트, 아래는 타입스크립트로 작성했다. 함수 호출 시 숫자가 아닌 문자열을 넣으면 자바스크립트는 문자열을 결합해서 전혀 다른 결과를 반환한다.
아래는 간단한 코드라서 헷갈리지 않지만, 코드양이 많아지고 큰 프로젝트의 경우 이런 사소한 오류를 찾기 위해 많은 시간을 쏟아야 할 수도 있다. 반면 타입스크립트는 문자열을 넣으면 명확한 타입 에러 메시지를 던지기 때문에 의도치 않은 코드 동작을 미연에 방지할 수 있다.
function sum(a, b) {
return a + b;
}
sum(10, 20); // 30
sum(10, '20'); // 1020
타입이 지정돼 있지 않다(any)
function sum(a: number, b: number) {
return a + b;
}
sum(10, 20); // 30
sum(10, '20'); // Error
명확한 타입이 지정돼있다(number)
타입스크립트 코드에서 sum() 함수를 이용해 두 숫자의 합을 구한 결과를 result 변수에 담고, result. 를 입력하면(콤마까지) 해당 타입에서 제공하는 API 목록이 자동으로 나온다.
Number 타입의 API 목록 화면. tab만 누르면 자동완성 되기 때문에 편하다.