[Typescript] 타입스크립트와 자바스크립트

🕵️ Javascript와 Typescript

모든 프로그래밍 언어는 타입 시스템을 갖는다.

[타입 시스템]
언어의 타입과 관련된 문법 체계로써, 값들은 어떤 기준으로 묶어 타입을 규정할 것인지 결정한다.
코드의 타입을 언제, 어떻게 검사할 것인지 결정한다.

 

이 타입 시스템에는 대표적으로 두 개의 시스템이 존재한다.

 

1) 정적 타입 시스템

• 정적 타입 시스템은 엄격하고 고정적인 시스템이다. 
• 변수를 선언할 때, 변수에 할당할 값의 데이터 타입을 사전에 선언해야한다.
• 또한 그 이후에 타입을 변경할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당할 수 있다.
• 컴파일 시점에 타입 체크를 수행한다.
• 타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현과 런타임에 발생하는 에러를 줄이지만, 모든 변수에 타입을 지정해주어야하므로 타이핑 양이 증가한다.

int num = 1;

num = "str" // 타입 에러 발생

 

2) 동적 타입 시스템

• 동적 타입 시스템은 자유롭고, 유연한 시스템이다.
• 코드 실행 후, 그때 그때 유동적으로 변수의 타입을 결정한다.
• 하나의 변수에 어떠한 데이터 타입의 값이라도 자유롭게 할당이 가능하다. 
• 런타임 시점에 에러를 발견하므로 미리 대처가 불가능하다. 

let num = 1;
num = "str" // 에러가 발생하지 않는다.

 

타입스크립트의 경우 동적 타입 시스템과 동적 타입 시스템 각각의 단점을 보완하고, 장점을 쏙 뽑아온

"점진적 타입 시스템" 을 사용한다. 

 

 

[점진적 타입 시스템]

• 변수의 타입을 실행 전에 결정하고, 런타임 이전에 타입 체크를 수행한다.
• 따라서 런타임 시점에 발생할 에러를 줄여준다.
• 자동 추론이 가능하기 때문에 모든 변수에 타입을 일일이 지정할 필요가 없다.

🤷‍♂️ 자동추론?
타입을 지정한 변수들은 그 타입으로 지정하고, 지정하지 않은 변수들은 자동 추론을 실행한다.

• 따라서 개발자가 타이핑 해야할 코드의 양이 줄어든다.

 

💠 타입시스템의 동작 원리

대다수의 프로그래밍 언어는 다음과 같이 동작한다.

 

대부분의 프로그래밍 언어는 사람이 이해하기 쉽도록 설계되어 있으며, 1. 이를 통해 원하는 명령어를 작성한다. 

하지만 이 자체로는 사람 친화적이기 때문에 컴퓨터가 이해하지 못한다.

따라서 컴퓨터가 이해하기 쉬운 형태로 변환해주는 2. 컴파일 과정이 필요하다. 이렇게 컴파일 과정을 거치면 3. 프로그램이 컴퓨터에서 실행될 수가 있다.

 

즉, 컴퓨터가 이해할 수 있도록 기존 코드를 컴파일 하는 과정이 존재해야하는데 자바스크립트와 타입스크립트는

컴파일 과정에서 차이가 존재하다.

 

1) 자바스크립트의 컴파일 과정

Javascript ➡️  AST(추상 문법 트리) ➡️ 바이트 코드

 

 

2) 타입스크립트의 컴파일 과정

Javascript ➡️ AST(추상 문법 트리) ➡️ 타입 체크

➡️ 만약 실패 시에는 컴파일이 종료
➡️ 만약 성공 시에는 다시 Javascript로 변환 ➡️ AST ➡️ 바이트 코드 ➡️ 실행

 

타입스크립트는 자바스립트와 달리 AST로 변환 후, 타입 체크를 실행하고, 컴파일 성공 시 다시 Javascript 로 변환된다.

이 때, 타입 체크를 실행하고 난 뒤 변환된 javascript 파일의 경우 타입 관련 문법들이 모두 제거된 아주 안전한 코드이다.

 

✏️AST(추상 문법 트리)

코드의 공백이나 주석 같이 실행에 관련 없는 것들은 제거한 후, 트리 형태의 자료 구조에 코드를 쪼개서 저장한 형태