[TS] TypeScript는 무엇인가?

 

 

타입스크립트는 자바스크립트의 상위 개념이다.

자바스크립트에는 이미 원시타입인 string, number, object, undefined 가지고 있지만 변수를 선언할 때 변수의 타입을 일관되게 대입하였는지 확인하지 않는다.

TypeScript의 타입 검사기는 개발자가 생각한 타입과 JavaScript가 실제로 대입하는 타입 사이의 불일치를 경고를 한다.

어째서 사용해야 하는가?

1. 위에서 설명 하였듯이 개발자가 의도한 타입과 실제 자바스크립트가 할당하는 타입이 다를 수 있는걸 미리 경고하여 사전에 에러를 방지하여 안정성과 신뢰성을 얻는다.
2. 자동완성 기능과 가이드를 볼 수 있게 해주어 생산성을 얻는다.

1. 에러 방지

첫번째로 자바스크립트는 변수를 선언할 때 ES6 기준으로 let과 const를 사용한다.

그에 반해 C#이나 Java 등의 언어들을 경험해보면 알겠지만 변수를 선언할 때 타입을 먼저 선언한다.

이 말은 다시 말해서, 자바스크립트가 다른 타입을 할당할 가능성이 존재한다는 말과 같다.

 

(.js)

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

console.log(sum(10, 20)) // 30
console.log(sum("10", "20")) // 1020

 

(.cs)

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

Console.WriteLine(sum(10, 20)); // 30
Console.WriteLine(sum("10", "20")); // Error!

 

위 두 코드는 개발자가 두 숫자를 Input으로 받고 그 수들의 합을 Output으로 주는 함수를 코딩했다.

자바스크립트는 매개변수에 타입을 명시하지 않아서 개발자가 의도하지 않은 문자열에 합을 수행했다.

이를 방지하고자 타입스크립트가 필요한 것이다.

 

 

(.ts)

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

console.log(sum(10, 20)) // 30
console.log(sum("10", "20")) // Error!

 

매개변수로 받아야할 두 개의 변수에 타입을 명시해줬다. number를 받아야 하며 이외에 타입은 에러를 출력한다.

개발자가 의도한 숫자의 합만을 기능하는 함수를 완성했다.

 

2. 자동완성과 가이드

이러한 타입은 에디터에서 사용하는 자동완성 기능과 가이드에서도 차이가 난다.

처음 자바스크립트를 접한 후 C#을 사용했던지라 Visual Studio 2019에 기능은 정말 대단하다고 느꼈다.

Visual Studio로 변수나 함수 등 어떤 타입이든지 .을 붙이면 자동완성 후보들을 선택할 수 있는 창이 출력된다.

하지만 자바스크립트는 그런 것이 많이 빈약 해보였다.

다행히도 그 이유는 언어에 있었고 타입스크립트를 사용하면 말끔히 해결할 수 있다.

사실 이점에서 타입스크립트에 더 손이간다. 에러를 예방할 수 있다지만 리액트를 개발하면서 타입으로 고생한적은 손에 꼽을 정도다 물론 프로젝트 크기가 커지면 치명적이겠지만

 

JavaScript

C#

TypeScript

 

위 이미지로 정리가 된다.

자바스크립트에 경우 타입을 명시하지 않았기 때문에 후보를 추천할 수 없다.

반면 TypeScript와 C# 같이 명확하게 타입을 명시하였기 때문에 result의 타입이 숫자(Number, int)인 것을 에디터가 알기에 추천하는 API나 메서드를 후보를 미리보기로 띄어줄 수 있다.

브라우저에서 타입스크립트

브라우저 엔진에 있는 자바스크립트 해석기는 타입스크립트를 해석할 수 없다. 

그렇기 때문에 타입스크립트를 자바스크립트로 변환해준다.

이 과정을 컴파일이라고 한다.