[Typescript] Typescript를 왜 사용하는지에 대해 알아보자

타입스크립트는 타입이 컴파일 시점에 결정되어 런타임 도중에 오류가 발생하는걸 방지한다 정도로만 알고, 많이들 사용하니까 나도 사용하고 있었다.

 

현재 대부분의 IT 기업들이 Typescript를 필수 스택으로 지정해놓다시피 하는데, 그 이유가 무엇인지 제대로 알아야 공부를 하는 목적이  와닿을 것 같아 조금 더 자세히 Typescript를 왜 써야하는지, 왜 많이들 쓰는지에 대해 알아보려고 한다.

 

타입스크립트는 자바스크립트에 타입을 정의하는 문법을 추가한 것으로, 자바스크립트의 한계를 극복하기 위해 등장했다.

// JavaScript
let a = 1;
let b = 2;

console.log(a+b);

//TypeScript
let a:number = 1;
let b:number = 2;

console.log(a+b);

 

위 예시에서 변수 a, b에 숫자가 아닌 다른 타입의 값을 넣으면 에러가 발생한다. 그러나 이정도의 타입 안정성 보장이 많이 중요한가..?라는 의문이 들었는데, 자바스크립트 언어의 등장 배경을 알고 보니까 자바스크립트는 생각보다 더 자유도가 높구나.. 라는 생각이 들었다.

 

자바스크립트 언어는 원래 웹 브라우저 내에서 사용자와 간단한 상호작용을 위해 만들어진 언어로, 동적 타입 시스템으로 인해 매우 자유롭게 사용할 수 있다는 장점이 있다. 유연한 문법으로 자유롭게 만들 수 있으나 타입 안정성이 떨어져 버그 발생 가능성이 높아진다는 단점이 있다.

 

자바스크립트 코드를 실행할 수 있는 환경인 node.js의 등장으로, 웹 브라우저만이 아닌 백,프론트 등 다양한 곳에서 자바스크립트로 프로그램을 실행할 수 있게 됐다. -> 자바스크립트로 여러 고도화된 프로그램을 만들 수 있게 되니, 타입 안정성 부족의 문제점이 와닿기 시작한 것!

그래서 이 자유로운 언어에 유연성을 유지하면서도 정적 타입 검사를 얹어 안정성을 높인 '타입스크립트'라는 것이 등장하게 된 것이다..

타입 시스템이란 ?
- 언어의 타입 관련된 문법 체계. 모든 프로그래밍 언어엔 타입 시스템이란 게 존재한다.

정적 타입 시스템
컴파일 시점에 모든 변수의 타입 결정
ex) C, Java

동적 타입 시스템
런타임 시점에 그때그때마다 유동적으로 변수의 타입 결정
ex) Python, JavaScript

 

정적 타입 시스템 vs 동적 타입 시스템

C, Java와 같은 정적 타입 시스템은 다음과 같이 모든 변수에 일일이 타입을 지정해주어야 한다. 

String a = "hello"
int b = 123;
int c = a*b; //에러 발생

 

이렇게 일일이 타입을 지정해줘야하는 번거로움, 유연성 부족 등의 단점이 있다..! 내가 자바 싫어하는 이유,,

let a = 'hello'; // 문자열
a = 132123213; // 숫자

 

반면 동적 타입 시스템은 위와 같이 변수의 타입이 하나로만 고정되지 않는다.

아무 타입의 값이나 자유롭게 담을 수 있지만, 문제는 코드가 실행될 때 예상치 못한 오류가 발생할 수 있다.

 

타입스크립트는 각 타입 시스템의 이러한 장점을 혼합한 것으로, 타입 오류를 실행 전에 검사함과 동시에 자동으로 변수의 타입을 추론하기 때문에 모든 변수에 일일이 타입을 지정해줄 필요는 없다. 즉, 점진적 타입 시스템을 갖고 있다.

 

타입스크립트는 어떻게 실행될까?

타입스크립트는 컴파일 과정(프로그래밍 언어->기계어 변환)에서 타입 체크가 실행된다.

 

TypeScript의 컴파일 과정

 

1. TS로 짜여진 코드 -> AST(추상 문법 트리)로 변환

2. 타입 검사

     if 검사 실패 시 컴파일 종료!!

     if 검사 성공 -> AST를 자바스크립트 코드로 변환

3. 타입 체크에 성공하면, js로 변환된 코드(타입 검사를 통과한 안전한 js 코드)들이 다시 컴파일 과정을 거침

 

위 과정을 거치고, 변환된 js 코드들이 브라우저나 node.js에서 실행된다. 이 시점을 런타임 시점이라고 한다.

런타임 시점에서는 typescript의 타입 정보가 다 제거되어 있다.

 

 

🚀 즉, 타입스크립트의 이점은 컴파일 시점에 잠재적인 문제를 미리 발견하여 런타임 오류를 줄임과 동시에, 타입 추론 등으로 유연성도 어느 정도 갖추고 있다는 것!

자바스크립트는 자유도가 많이 높은 언어인데, 현재는 활용도가 너무 높아지다보니 타입스크립트로의 보완이 거의 필수가 된 것 같다.