타입스크립트 (1) 타입스크립트란?

타입스크립트란?

타입스크립트는 마이크로소프트에서 관리하는 오픈 소스 프로그래밍 언어로 자바스크립트의 슈퍼셋(superset)입니다. 슈퍼셋은 상위 집합이라는 의미로 자바스크립트의 모든 기능을 지원하는 동시에 추가 기능을 제공한다는 의미입니다.

 

타입스크립트가 출시된 이유는 무엇이며 바닐라 자바스크립트에 비해 어떤 장점이 있을까요?

타입스크립트를 사용하는 이유

타입스크립트를 사용하는 가장 큰 이유 중 하나는 타입(type)을 사용하여 런타임 이전에 오류를 발견하기 위해서입니다. 아래 예시를 살펴볼까요?

 

아래와 같은 자바스크립트 코드의 의도는 숫자를 전달받는 것이겠지만 실제로는 어떤 타입의 인수를 받고 리턴해야 하는지 정확하게 정해져 있지 않습니다. 따라서 문자와 숫자를 더하는 이상한 연산도 오류가 없이 진행이 됩니다.

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

sum('x', 'y'); //'xy'
sum(1, 'y'); //'1y'

반면, 타입스크립트를 사용하면 다음과 같이 정적 타입을 지정할 수 있으며, 특정한 타입만을 허용할 수 있습니다.

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

sum('x', 'y'); //'error'

이처럼 타입스크립트는 타입 시스템을 통해 런타임 오류를 초래하는 코드를 사전에 알려줍니다. 모든 오류를 잡아내는 것은 아니지만 자바스크립트를 사용할 때에 비해 런타임 오류가 발생하는 확률이 크게 낮아지며, 이것이 바로 타입스크립트를 사용하는 가장 큰 이유 중 하나입니다.

타입스크립트 작동 방식

타입스크립트 파일(.ts)는 브라우저에서 작동하지 않습니다. 따라서 컴파일러를 사용하여 자바스크립트 파일로 변화시켜야합니다(컴파일 또는 트랜스파일링).

$ npm install -g typescript
$ tsc -v
$ tsc file.ts

위와 같이 tsc 컴파일러를 사용하여 타입스크립트 파일을 자바스크립트 파일로 컴파일할 수 있습니다.

 

타입스크립트의 작동 방식을 처음부터 정리해보면 다음과 같습니다.

1. 타입스크립트로 코드를 작성하고 컴파일을 진행합니다.
2. 타입 오류가 체크되고, 자바스크립트로 코드가 변환됩니다. 이 과정에서 타입스크립트의 인터페이스, 타입, 타입 구문 등은 제거되어 순수한 자바스크립트 코드가 됩니다.
3. 자바스크립트 코드가 실행됩니다.

 

참고 자료

• https://www.typescripttutorial.net/typescript-tutorial/what-is-typescript/