1. TypeScript란?

1.1 타입스크립트, 네가 궁금해!1.2 타입스크립트가 왜 필요할까?1.2.1 에러, 내가 미리 막을게 1.2.2 내가 도와줄게 - 자동완성, 가이드 역할

1.1 타입스크립트, 네가 궁금해!

자바스크립트를 사용해 본 사람이라면 누구나 한번쯤 타입스크립트를 들어본 적이 있을 것이다. 타입스크립트란 무엇일까?

"Typescript is a typed superset of Javascript that compiles to plain Javascript" 타입스크립트는 자바스크립트로 컴파일 되는, 자바스크립트의 타입이 있는 상위집합이다. -공식 문서-

타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다.

자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다.

타입스크립트는 모든 운영 체제, 모든 브라우저, 모든 호스트에서 사용 가능한 오픈 소스이다.
-위키백과-

공식문서와 위키백과에서 주목해야 할 단어는 타입이 있는(typed) 과 상위집합(superset)이다.

타입스크립트는 타입이 있는 자바스크립트이다. 좀 더 정확하게 말하자면, 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다.

타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해줘야 한다. 이 변환 과정을 컴파일(complile) 이라고 부른다. 여기서 이러한 의문이 들 것이다.

그럼 굳이 타입스크립트를 왜 쓰는 거야?

지금부터 타입스크립트가 왜 필요한지 알아보자.

1.2 타입스크립트가 왜 필요할까?

1.2.1 에러, 내가 미리 막을게

타입스크립트는 자바스크립트와 다르게 에러를 사전에 미리 예방할 수 있다. 이는 유지보수 비용을 크게 줄여준다. 또한 코드를 다 작성하고 배포하려는 타이밍에 오류가 생긴다면 일정에 차질이 생길 수 있고, 최악의 경우 코드를 모두 다시 작성해야 하는 일이 생길 수도 있다. 타입스크립트는 이를 사전에 방지해서 우리가 좀 더 편하게 코딩을 할 수 있도록 도와준다.

아래 2가지 코드를 통해 어떻게 에러를 예방하는지 같이 살펴보자.


// math.js
function sum(a, b) {
  return a + b;
}


// math.ts
function sum(a: number, b: number) {
  return a + b;
}

하나는 자바스크립트, 하나는 타입스크립트로 작성한 코드이며, 두 코드 모두 숫자의 합을 구하는 함수 코드이다. 이 함수를 가지고 코드를 작성해보겠다.


sum(20, 30); // 50

이렇게 sum 함수를 이용하여 숫자 20 과 30 을 더한다. 그러면 우리가 원하는 결과인 50 을 얻을 수 있다.


sum('20', '30'); // 2030

그런데, 이렇게 작성을 한다면 어떻게 될까? 여러분이 자바스크립트에 익숙하다면 위 코드의 결과를 바로 알 것이다. 숫자가 아닌 문자열을 더하는 것이기 때문에 우리가 원했던 50 이 아닌 2030 이라는 결과가 나온다.


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

이를 타입스크립트로 작성하고 VSCode 로 확인한다면 다음과 같은 결과를 볼 수 있다. 타입스크립트는 이처럼 예기치 못한 상황을 사전에 미리 차단할 수 있다.

1.2.2 내가 도와줄게 - 자동완성, 가이드 역할

타입스크립트는 개발 툴의 기능을 최대로 활용할 수 있다. 프론트엔드 개발 시 가장 많이 사용하고, 우리 책에서도 쓸 VScode 는 툴의 내부가 타입스크립트로 작성돼있기 때문에 타입스크립트 개발에 최적화 되어 있다. 좀 더 확실하게 알고 넘어가기 위해 코드를 통해 알아보자.


// math.js
function sum(a, b) {
  return a + b;
}
var result = sum(20, 30);
result.toLocaleString();

* toLocaleString() : 숫자를 브라우저가 지원하는 지역화 문자로 변환해주는 메서드

위 코드는 앞에서 살펴봤던 sum() 함수를 이용해 두 숫자의 합을 구한 다음, *toLocaleString() 를 적용한 코드이다. 여기서 자바스크립트 엔진은 result 이라는 변수를 파싱할 때 타입이 number 라는 것을 알 수 없다.

쉽게 말해서, 개발자가 알아서 sum() 함수의 결과가 number 타입을 가진다는 것을 미리 파악을 한 상태에서number 의 메서드인 toLocaleString() 를 일일이 다 작성해야한다. 만약에 오타가 나서 toLocaleStirng() 이라고 작성했다 하더라도, 이 파일을 브라우저에서 실행을 해야만 오류를 확인할 수 있을 것이다. 그럼, 타입스크립트로 작성하면 어떻게 될까?


// math.ts
function sum(a: number, b: number): number {
  return a + b;
}
var result = sum(20, 30);
result.toLocaleString();

변수 result 에 대한 타입이 지정되어 있기 때문에 tol 만 쳐도 VSCode에서 toLocaleString() 을 미리 보기로 띄워준다. 이처럼, 매번 다 일일이 치는 것이 아니라 자동완성을 통해 작성해나갈 수 있도록 친절하게 가이드 역할을 해준다.

🦁

지금까지 타입스크립트에 대해서 간단하게 알아보았다. 이제 타입스크립트 개발 환경을 함께 구축해보도록 하자.