TypeScript

TypeScript : 자바스크립트에 타입을 부여한 언어

Typescript를 사용하는 이유

• 에러의 사전 방지
• 코드 가이드 및 자동 완성

에러의 사전 방지

// 자바스크립트
function sum(a, b) {
  return a + b;
}

// 타입 스크립트
function sum(a: number, b: number) {
  return a + b;
}

두 함수 모두 sum(10, 20)을 실행시키면 30이라는 결과를 얻을 수 있다.

하지만 다음과 같이 함수를 호출하면 어떻게 될까

sum('10', '20');

숫자 대신 문자열을 더하기 때문에 30이 아닌 '1020'이라는 결과가 나온다.

타입스크립트는 이처럼 의도치않은 코드를 동작을 예방할 수 있다.

function sumTs(a: number, b: number) {
  return a + b;
}
sumTs('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

코드의 자동 완성과 가이드

// sumJS 함수를 이용하여 두 숫자의 합을 구한 다음 toLocaleString()를 적용한 코드

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

var total = sum(10, 20); // var total: any
total.toLocaleString();

여기서 total이라는 변수의 타입이 코드를 작성하는 시점에 number 라는 것을 자바스크립트가 인지하지 못하고 있다.
total이라는 값이 정해져 있지 않기 때문에 자바스크립트 Number에서 제공하는 API인 toLocaleString()을 일일이 작성했다. 만약에 오탈자라도 나서 toLocalString()이라고 했다면 이 sumJs 함수를 실행했을 때 오류가 발생했을 것이다.

하지만 타입스크립트로 작성하면

function sumTs(a: number, b: number): number {
return a + b;
}
var total = sumTs(10, 20); // var total: number
total.toLocaleString();

변수 total에 대한 타입이 지정되어 있기 때문에 VSCode에서 해당 타입에 대한 API를 미리 보기로 띄워줄 수 있다.