타입스크립트 란?

타입스크립트

자바스크립트(JS)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어.

---

타입스크립트의 특징

컴파일 언어, 정적 타입 언어

JS는 인터프린터 언어, TS는 컴파일러 언어로 컴파일을 통해 type을 체크함으로서 type오류를 일차적으로 확인하여

1. type 안정성을 확보
2. type에 대한 예외저리를 하지 않아도됨
3. JS가 자주 호출되는 함수를 최적화하는데 도움을 줌(자주 호출되는 함수의 인자의 type 값을 읽어둠으로)
4. 이미 type이 정해져 런타임에 들어가 실행 속도가 빠름

 

JS의 Superset(상위집합)

JS의 기본 문법에 TS의 문법이 추가된 형태로 .js파일을 .ts파일로 변경하여 컴파일해 사용할 수 있음. 즉 js 파일을 .ts파일로 변경하여 타입을 선택적으로 적용 가능. 또한 기존의 JS를 사용하던 사람들이라면 running curve가 높지 않음.

 

객체 지향 프로그래밍( OOP ) 지원

 

---

타입스크립트의 단점

초기 세팅 비용

TS는 독자적인 언어가 아님으로 기존의 JS 엔진을 위해 기본적인 모듈 설정 + 컴파일을 위한 옵션들을 추가가 필요

 

가독성이 떨어짐

type을 명명하는 부분이 추가되 JS와 비교해 코드의 길이가 길어져 가독성이 떨어짐

 

---

왜 사용하는가?

높은 수준의 코드 탐색과 디버깅

타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다. 

 

 

자바스크립트 호환

타입스크립트는 자바스크립트와 100% 호환된다. 따라서 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있다. 타입스크립트는 앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용 가능하며 서버 단에서 개발이 이루어지는 복잡한 대형 프로젝트에서도 빛을 발한다.

 

강력한 생태계

타입스크립트는 그리 오래되지 않은 언어임에도 불구하고 강력한 생태계를 가지고 있다. 대부분의 라이브러리들이 타입스크립트를 지원하며 마이크로소프트의 비주얼 스튜디오 코드(VSCode)를 비롯해 각종 에디터가 타입스크립트 관련 기능과 플러그인을 지원한다.

 

점진적 전환 가능

기존의 자바스크립트 프로젝트를 타입스크립트로 전환하는데 부담이 있다면 추가 기능이나 특정 기능에만 타입스크립트를 도입함으로써 프로젝트를 점진적으로 전환할 수 있다. 자바스크립트에 주석을 추가하는 것에서부터 시작해 시간이 지남에 따라 코드베이스가 완전이 바뀌도록 준비 기간을 가질 수 있다.

 

 

따라서 프로젝트 성격에 따라 타입스크립트를 사용할지 결정하면 된다. 프로젝트의 규모가 크고 복잡할수록, 유지보수가 중요한 장기 프로젝트일수록 타입스크립트의 이점이 부각될 것이다.

---

타입스크립트 애플리케이션 개발 과정

1. TS 설치 : npm 혹은 플러그인 설치를 통해 ts 설치
2. .ts 파일 작성 : TS 규칙에 따라 파일을 작성
3. 컴파일 : 작성한 다수의 .ts 파일들을 .js 파일들로 변환
   1. 단일 .ts 파일
   2. //fileName.ts 파일을 컴파일하여 fileName.js 파일을 생성하는 command line 예시 tsc fileName.ts
   3. 프로젝트 단위 (예시: node)
      1. TS에서 node를 실행할수 있는 런타임 ts-node를 설치
      2. tsconfig.json 파일을 생성하고 원하는 옵션에 따라 작성
4. 번들링 : 웹팩 또는 롤업을 사용하여 변환된 .js 파일들을 하나의 .js파일로 통합하고 불필요한 코드를 제거
5. 배포

---

컴파일러

보통 high-level 언어(개발의 편의성이 높음)를 low-level언어(성능, 효율, 속도 측면에서 뛰어남) 로 변환. 런타임 이전에 low-level언어로 변환하기 때문에 구동 시간(컴파일시간)이 길지만, 컴파일 이후는 하나의 패키지로 매우 빠르게 작동 하여 실행 속도가 빠름

• 컴파일러는 전체 소스코드 를 보고 명령어를 수집하고 재구성
• 컴파일러는 고레벨 언어를 기계어로 바로 변환
• 컴파일러가 인터프린터 보다 실행 시간이 빠름
• 컴파일링 당시 에러 확인
• C언어, C++

 

인터프리터

런타임 이후에 줄 단위로 해석하여 프로그램을 구동시키는 방식으로 실행 속도가 느리지만 런타임에 코드 수정이 가능

• 인터프리터는 소스 코드의 각 행을 연속적으로 분석하며 실행
• 인터프리터는 고레벨 언어를 바로 기계어로 변환하는 것이 아닌. 중간 형태로 변환
• 실행 도중 에러 확인
• 파이썬, 자바스크립트

 

자바는 컴파일러, 인터프리터 둘 다 사용
.java파일 — javac(java compiler)→ .class 파일(JVM Java Virtual Machine을 위한 기계어)
.class 파일 — java interpreter —> machine language ( mac같은 프로그램에서 사용)

 

컴파일러 실행 단계

1. 구문 분석 : 소스 코드(컴파일 이전의 문서) 를 개별 문법요소 단위로 자른 후, 이 문법 요소들을 해석하여 추상 구문 트리(각 노드는 소스 코드에서 발생되는 구조를 가진 트리)를 생성. 구문 분석 과정에서 문법에 맞지 않는 소스 코드를 에러 메시지로 사용자에게 알림.
2. 최적화 : 구문 분석에서 생성된 추상 구문 트리를 분석하여 최적화를 수행하는 단계. 도달할 수 없는 코드를 식별, 상수 표현식을 미리 계산
3. 코드 생성 : 최적화된 구문 트리로 부터 목적 코드(컴파일 이후에 출력된 문서)를 생성. 하드웨어에 맞는 최적화가 이루어짐
4. 링킹 : 링커에 의해 목적 코드가 기계어 일때, 여러 라이브러리 목적 코드를 묶어 하나의 실행 파일을 생성

타입스크립트 컴파일러

타입스크립트의 컴파일러는 tsc 이며 컴파일의 결과는 TS의 키워드 및 표현식이 제거 된 순수한 JS