TypeScript 언어 소개 및 장점 및 단점, 컴파일러 동작 방식

1.1. 이 포스트에서 다룰 내용

TypeScript 란?
TypeScript 장점 및 단점
TypeScript 컴파일러 동작 방식

2. TypeScript 란?

TypeScript 란 순수 JavaScript 로 컴파일하는 정적 형식의 JavaScript 슈퍼셋입니다.

쉽게 말해서 JavaScript 에 타입을 부여한 정적 타입 언어입니다.

3. TypeScript 의 장점

1. 컴파일러를 통해 사전 에러를 발견할 수 있습니다.

만약 타입스크립트를 설치하면 tsc 라는 명령어로 타입스크립트 파일을 컴파일할 수 있습니다. 이때 컴파일 단계에서 문법 에러를 잡을 수 있으므로 사소한 실수들을 프로그램 실행 전 모두 체크할 수 있습니다.

 

2. 타입을 강제화합니다.

타입스크립트는 모든 객체에 타입을 강제화하여 타입으로 발생하는 문제를 원천 차단합니다.

 

3. IDE와 같은 도구에 타입 정보를 제공함으로써 높은 수준의 인텔리센스(IntelliSense), 코드 어시스트, 타입 체크, 리팩토링 등을 지원받을 수 있습니다. 이는 대규모 프로젝트에서 필수적인 기능입니다.

 

4. 인터페이스, 제네릭 등의 객체 지향 언어 문법을 추가 지원하면서 객체 지향 언어 스타일로 코드를 작성할 수 있습니다.

4. TypeScript 의 단점

1. 개발의 규모가 커지면 커질수록 타입 설정이 귀찮고 시간이 오래 걸릴 수 있습니다.

타입스크립트는 타입 강제화를 위해 코드에 타입을 지정해야 합니다. 물론 타입 추론을 활용해 자동으로 타입을 인식하게 만들 수 있지만, 배열, 객체, 함수의 경우 사용자가 타입을 선언해서 미리 제한해야 합니다. 이 과정에서 자바스크립트로 개발할 때보다 시간이 더욱 소요될 수 있습니다.

2. 코드의 가독성이 떨어질 수 있습니다.

만약 타입을 지정하지 않는다면 타입 추론을 해야 하는데 타입 추론하기 힘든 경우 컴파일러에게 알려주는 형 변환을 하거나 제네릭을 사용하여 어떤 타입이 들어오더라도 동작할 수 있도록 선언해야 합니다. 문제는, 이렇게 코드를 작성하다 보면 코드가 길어질 수 있는 문제가 있습니다.

3. 근본적인 자바스크립트 오류는 해결할 수 없습니다.

타입스크립트의 원본은 자바스크립트이기 때문에 자바스크립트에서 발견하기 힘든 난해한 버그가 여전히 타입스크립트에서 나타날 수 있습니다.

5. TypeScript 컴파일러 동작 방식

타입스크립트 컴파일 과정은 다음과 같습니다.

1. 타입스크립트 소스 코드 -> 타입스크립트 AST(abstract syntax tree, 추상 문법 트리)

2. 타입 검사기가 AST 를 확인

3. 타입스크립트 AST -> 자바스크립트 소스 코드

4. 자바스크립트 소스 코드 -> 자바스크립트 AST(abstract syntax tree, 추상 문법 트리)

5. 자바스크립트 AST -> 바이트 코드

6. 런타임이 바이트 코드 평가

 

타입스크립트가 다른 언어와 다른 점은 컴파일러가 소스 코드를 바이트 코드 대신 자바스크립트 코드로 변환합니다. 그리고 타입스크립트는 컴파일 단계에서 AST 를 만들어 결과 코드를 내놓기 전에 타입 확인을 거치는데, 만약 여기서 문제가 생기면 바로 알 수 있습니다.

6. 출처

https://poiemaweb.com/typescript-introduction#:~:text=TypeScript%EB%8A%94%20%EC%A0%95%EC%A0%81%20%ED%83%80%EC%9E%85%EC%9D%84,%ED%95%98%EB%A9%B0%20%EB%94%94%EB%B2%84%EA%B9%85%EC%9D%84%20%EC%89%BD%EA%B2%8C%20%ED%95%9C%EB%8B%A4. 

TypeScript - Intro & Install | PoiemaWeb

https://joshua1988.github.io/ts/why-ts.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%9E%80

Why TypeScript? | 타입스크립트 핸드북

https://kim1124.tistory.com/93

1. 타입 스크립트에 대해 알아보자.