타입스크립트란?
타입스크립트는 자바스크립트에 타입을 부여한 언어이다.
자바스크립트의 확장된 언어라고 볼 수 있다.
타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 한다.
이 변환 과정을 우리는 컴파일(complile) 이라고 부른다.
왜 타입스크립트를 써야할까?
타입스크립트는 아래 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있다.
- 에러의 사전 방지
- 코드 가이드 및 자동 완성(개발 생산성 향상)
에러의 사전 방지
타입스크립트는 에러를 사전에 미리 방지할 수 있다.
// math.js
function sum(a, b) {
return a + b;
}// math.ts
function sum(a: number, b: number) {
return a + b;
}두 코드 모두 두 숫자의 합을 구하는 함수 코드이다.
하나는 자바스크립트로 작성했고 또 다른 하나는 타입스크립트로 작성했다.
sum(10, 20); // 30이렇게 sum 함수를 이용하여 숫자 10과 20을 더한다.
그러면 우리가 원하는 결과인 30을 얻을 수 있다.
sum('10', '20'); // 1020자바스크립트에 익숙하다면 위 코드의 결과가 헷갈리지는 않을 것이다.
숫자 대신 문자열을 더하기 때문에 10 + 20 = 30이 아닌 1020 이라는 결과가 나타난다.
타입스크립트는 이처럼 의도하지 않은 코드의 동작을 예방할 수 있다.
// math.ts
function sum(a: number, b: number) {
return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.이 코드를 VSCode에서 확인하면 다음과 같은 오류를 확인할 수 있다.
코드 자동 완성과 가이드
타입스크립트의 또 다른 장점은 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다는 것이다.
요즘엔 프론트엔드 개발을 할 때 가장 많이 사용되는 Visual Studio Code는 툴의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화 되어 있다.
개발자 관점에서 자바스크립트에 타입이 더해졌을 때 어떠한 장점이 있는지 살펴보기 위해 아래 자바스크립트 코드를 보겠다.
// math.js
function sum(a, b) {
return a + b;
}
var total = sum(10, 20);
total.toLocaleString();위 코드는 앞에서 살펴봤던 sum() 함수를 이용하여 두 숫자의 합을 구한 다음 toLocaleString() (특정언어의 표현 방식에 맞게 숫잘르 표기하는 API)를 적용한 코드이다.
여기서 toLocaleString() 라는 API가 어떤 역할을 하는지가 중요한게 아니라 위와 같이 코드를 작성할 때 total 이라는 변수의 타입이 코드를 작성하는 시점에 number 라는 것을 자바스크립트가 인지하지 못하고 있는게 중요하다.
달리 말하면, 개발자가 스스로 sum() 함수의 결과를 예상하고 타입이 number 라고 가정한 상태에서 number의 API인 toLocaleString()를 코딩하게 되는 것이다.
위에서 볼 수 있듯이 total 이라는 값이 정해져 있지 않기 때문에 자바스크립트 Number에서 제공하는 API인 toLocaleString()을 일일이 작성했다.
만약에 오탈자라도 나서 toLocalString() 이라고 했다면 이 math.js 파일을 브라우저에서 실행했을 때만 오류를 확인할 수 있다.
그런데 만약 타입스크립트로 작성하면 아래와 같은 현상이 나타난다.
function sum(a: number, b: number) {
return a + b;
}
var total = sum(10, 20);
total.toLocaleString();
변수 total에 대한 타입이 지정되어 있기 때문에 VSCode에서 해당 타입에 대한 API를 미리 보기로 띄어줄 수 있고 따라서, API를 다 일일이 치는 것이 아니라 tab으로 빠르고 정확하게 작성해나갈 수 있다.
