요즘 지원공고를 보다 보면 무조건 보이는 우대사항 타입스크립트..
우대가 아니라 필수사항이 되어버린 느낌이다.
그런고로 나도 해본다 타입스크립트!
타입스크립트를 쓰는 이유
요즘 타입스크립트를 많이들 사용하는 이유는 크게 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있다.
- 에러의 사전 방지
- 코드 가이드 및 자동 완성(개발 생산성 향상)
에러의 사전 방지
타입스크립트로 어떻게 에러를 사전에 예방할 수 있을까? js코드와 ts 코드를 비교해 보자.
// js
function sum(a, b) {
return a + b;
}// ts
function sum(a: number, b: number) {
return a + b;
}
위 코드로 sum('10', '20')을 실행시키면 어떤 값이 출력되는지 생각해 보자!
숫자 대신 문자열을 더하기 때문에 1020이라는 결괏값이 출력된다. 만약 숫자의 덧셈을 의도했다면 예상과 다른 결과가 나왔을 것이다.
이처럼 의도하지 않은 코드의 동작을 예방할 수 있다.
function sum(a: number, b: number) {
return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.
코드 자동 완성과 가이드
타입스크립트의 또 다른 장점은 코드 작성 시, 개발 툴의 기능을 최대로 활용할 수 있다는 점이다.
vscode는 툴 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화되어 있다.
자바스크립트에 타입이 더해지면 어떤 장점이 있을까? 아래 코드를 보자.
// js
function sum(a, b) {
return a + b;
}
var total = sum(10, 20);
total.toLocaleString();
toLocaleString()(특정 언어의 표현 방식에 맞게 숫자를 표기하는 API)를 적용한 코드다.
여기선 API의 역할이 아니라 위 코드에서 total 변수 타입이 코드를 작성하는 시점에 number라는 걸 자바스크립트가 인지 못하고 있는 게 중요하다.
total이라는 값이 정해져 있지 않기 때문에 number에서 제공하는 API인 toLocaleString()를 작성할 때, 미리 보기가 뜨지 않게 된다. 만약 직접 작성하다가 오타가 났다면 브라우저를 실행했을 때만 오류 확인이 가능했을 거다.
타입스크립트는 이런 문제를 해결해 준다.
// ts
function sum(a: number, b: number): number {
return a + b;
}
var total = sum(10, 20);
total.toLocaleString();
이처럼 변수 total에 대한 타입이 지정되어 있기 때문에 vscode에서 API 미리 보기를 띄워줄 수 있다. 따라서 빠르고 정확한 코드 작성이 가능해진다.