[Typescript] Typescript란? Typescript가 Javascript로 변해야하는 이유는?

목차

1. Typescript가 만들어진 배경과 정의

2. ES5, ESNext와 Typescript의 차이가 무엇인가

3. Typescript가 Javascript로 변해야하는 이유

 

Typescript(타입스크립트)

1. Typescript가 만들어진 배경과 정의

요즘 대부분의 회사에서 자바스크립트가 아닌 타입스크립트를 사용한다.

타입스크립트란, 자바스크립트가 가진 여러 문제를 해결하고 보완하기 위해 만들어진 언어이다.

여기서 여러 가지 문제라고 한다면 아래를 살펴보자.

1. 동적 타입: 자바스크립트는 동적 타입 언어이므로 변수의 타입을 선언하지 않고 사용할 수 있다. 이는 개발자가 변수의 타입을 실수로 잘못 사용하거나, 의도치 않은 타입 변환으로 인한 오류가 발생할 수 있음을 의미합니다.
   
   
2. 타입 체크의 부재: 자바스크립트는 컴파일 시점에 타입 체크를 수행하지 않고, 런타임 시에 타입 오류를 검출한다. 이는 개발자가 오류를 런타임 이전에 미리 확인하지 못하고, 실행 시점에서 발견되는 오류에 대한 디버깅을 어렵게 만든다.
   
   
3. 유연한 객체 모델: 자바스크립트는 프로토타입 기반 객체 지향 언어로, 객체의 동적인 형태를 지원한다. 이는 객체의 구조와 동작이 실행 시점에 변경될 수 있다는 것을 의미하며, 이로 인해 예상치 못한 동작이 발생할 수 있다.
   
   
4. 코드의 가독성과 유지 보수의 어려움: 자바스크립트는 동적 타입과 유연한 문법을 가지고 있어 코드의 가독성과 유지 보수가 어렵다. 특히 큰 규모의 프로젝트에서는 코드의 복잡성이 증가하고, 협업이 어려워질 수 있다.

알다가도 모를 javascript .. pic by ProdMoon

출처: https://codingapple.com/unit/how-to-install-typescript-in-local-vue-react/

요약하면, 자바스크립트의 특징(동적 타입 언어과 유연한 문법/런타임 시 타입 체크/객체 동적 형태 지원)으로 인한 문제이다.

이러한 문제들을 해결하기 위해 2012년 마이크로소프트가 타입스크립트(TypeScript)를 발표했다.

정적 타입을 도입하여 개발자가 변수의 타입을 명시하고, 컴파일 시점에서 타입 체크를 수행한다. 

 

2. ES5, ESNext와 Typescript의 차이가 무엇인가

"ES5", "ESNext", "Typescript" 이 글자들을 처음 접했을 때 어떤 차이인지, 이 차이가 중요한지에 대한 생각을 했다.

 

- 먼저, ES5는 ECMAScript5의 줄임말로 웹 브라우저에서 동작하는 표준 자바스크립트이다.

- ESNext는 ES6 이후 버전을 통틀어 부르는 "새로운 자바스크립트"이다.

(2009년 발표된 ES5 버전과 2015년 발표된 ES6의 버전의 큰 차이로 인해 구분.) ESNext는 ES5의 모든 문법을 포함한다.

- 

Typescript는 ESNext의 모든 문법을 포함한다. 그말인 즉슨, ES5의 모든 문법을 포함하기에 아래와 같은 관계도를 표현할 수 있다.

출처: Do it! 타입스크립트 프로그래밍 p.14

이는 명확한 차이로 구분할 수 있으며, ESNext의 문법적 특징와 Typescript 문법적 특징을 구분짓을 수 있다.

또한, 이 차이로 트랜스파일을 진행해야한다. 

 

트랜스파일이 무엇인가?

- 트랜스파일(transpile): 어떤 프로그래밍 언어로 작성된 소스코드를 또 다른 프로그래밍 언어로 된 소스코드로 바꾸는 것.

- 트랜스파일러(transpiler): 어떤 프로그래밍 언어로 작성된 소스코드를 또 다른 프로그래밍 언어로 된 소스코드로 바꿔주는 것.

- 컴파일러(compiler): 텍스트로 된 소스코드를 바이너리 코드 바꿔주는 것.

(* 트랜스파일과 컴파일은 '무엇인가를 또 다른 무엇으로 바꿔준다'는 관점에서 크게 차이가 없기에 요즘은 둘을 구분하지 않는 경향이 있다고함.)

 

트랜스파일을 왜 쓰는가?

- ESNext와 Typescript 모두 웹 브라우저 표준을 고려해야하기에 트랜스파일을 통해 ES5 문법으로 바꿔줘야한다.

 

트랜스파일을 어떻게 하는가?

- ESNext 자바스크립트 소스 코드는 바벨(Babel)이라는 트랜스파일러(transpiler)를 거쳐 ES5 자바스크립트 코드로 변환된다.

- 바벨과 유사하게 Typescript 소스코드는 TSC(Typescript Complier)라는 트랜스파일러를 통해 ES5 자바스크립트 코드로 변환된다.

 

3. Typescript가 Javascript로 변해야하는 이유

위의 내용을 다시 말하자면 ESNext 코드 혹은Typescript 코드는 ES5 코드로 변환해줘야한다는 것이다. 

 

Typescript에서 짚고 넘어가야할 점

→ Typescript는 브라우저에서 동작하지 않는다.

 

그러면 어떻게 해야하는가?

→ 바로, Javascript로 변환해야한다.

 

그럴려면 어떻게 해야하는가?

→ TSC(Typescript complier) 트랜스파일러를 통해 ES5 자바스크립트 코드로 변환한다.

 

요약하자면, Typescript 파일(.ts)은 Typescript 컴파일러(tsc)를 이용하여 Javascript 파일(.js)로 변환하여 사용한다.

과정: typescript 파일(.ts) → typescript 컴파일러(tsc) → javascript 파일(.js)

명쾌한 그림. 이 그림이 이 모든 글에 대한 답이다.

Reference : Do i! 타입스크립트 프로그래밍