[TS] TypeScript 컴파일 과정

 

---

알고있으면 좋은 Typescript Tip✨

---

TypeScript vs JavaScript

• Typescript와 Javascript는 컴파일언어, 인터프리터 언어라는 차이가 있다.
• Typescript는 컴파일 언어, Javascript는 인터프리터 언어이다.

 

(1) TypeScript의 컴파일러란 무엇인가?

• 일반적으로 컴파일(compile)은 소스 코드를 특정 플렛폼에서 실행 가능한 형태로 변환하는 과정을 의미를 가진다. 기존에는 C++나 Java와 같이 자체 타입 시스템을 가진 프로그래밍 언어에서 주로 다뤄지던 개념이었으나, 타입스크립트의 등장 이후로는 자바스크립트에서도 컴파일이라는 용어를 심심치 않게 들을 수 있게 되었다.
• 쉽게 말해, 타입스크립트 코드를 자바스크립트로 코드로 변환할 때 필요한 도구가 바로 타입스크립트 컴파일러이며, 타입스크립트 컴파일러는 코드 변환 과정에서 소위, 정적 타입 검사(static type check)를 해주기 때문에 프로그램 버그를 예방하는데도 활용된다.

 

(2) TypeScript의 실행 과정

1. Typescript 코드를 작성한다.
2. Typescript 코드를 TSC가 추상 구문 트리(AST)라는 것으로 변환한다.
3. 타입 검사기가 Typescript코드의 타입들이 정상적으로 작성됐는지 안정성 검사를 진행한다.
4. 타입이 안정적으로 작성됐으면 Typescript AST가 Javascript코드로 변환한다.
5. 변환된 Javascript코드가 다시 Javascript AST로 변환한다.
6. 이후 Javascript AST가 바이트코드로 변환된 후 프로그램이 실행되는 과정을 거친다.

 

(3) TypeScript 예제 생성 후 컴파일 진행해보기

1. tsconfig.json 파일 생성
   • 명령어 : tsc --init
   • 컴파일 이후의 파일을 src 폴더와 build 폴더로 나누어 저장하기 위해 생성한다.

{
  "compilerOptions": {
      "target": "es2016",   /* 버전 */
      "rootDir": "./src",   /* 타입스크립트 파일 저장 */
      "outDir": "./build",  /* 컴파일 된 자바스크립트 파일 저장 */
  } 
}

2. npm을 이용하여 package.json 파일 생성 후 수정
   • 명령어 : npm init -y
   • 명령어 : npm install nodemon concurrently (참고한 영상에서 설치해서 사용, 필수는 아니다.)
     • nodemon : 스크립트 모니터링 도구 (소스 변경 시 변경 된 소스를 반영 후 서버 재시작)
     • concurrently : 병행 실행을 할 수 있도록 하는 도구 (빌드와 실행을 병행해서 실행)
   • npm start 시 컴파일과 실행이 한 번에 진행 될 수 있도록 수정 (package.json -> scripts)
     • "start:build": "tsc -w" : 컴파일 과정을 콘솔에서 확인
     • "start:run": "nodemon build/index.js" : index.js 자바스크립트 파일을 실행
     • "start": "concurrently npm:start:*" : build 와 run을 병행해서 실행

{
  "name": "todo-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:bulid": "tsc -w",
    "start:run": "nodemon build/index.js",
    "start": "concurrently npm:start:*"

  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^8.2.2",
    "nodemon": "^3.0.1"
  }
}

3. 코드 작성 후 컴파일 진행
   • src 폴더에 ts 파일 생성 후 코드 작성 -> npm start -> build 파일에 js 파일 생성
   • js 파일을 실행하고 싶다면 파일이 존재하는 경로로 이동 후 node 파일명.js

// 타입스크립트 버전 (index.ts)
let message: string = "안녕하세요!";
console.log(message);

// 타입스크립트 버전 컴파일 (index.js)
let message = "안녕하세요!";
console.log(message);