Front_End [JS기반]/타입스크립트

[ 3D Web : Front&Back_Type Script ] 타입스크립트 : 트랜스파일링이란

안다미로 : Web3 & D.S 2024. 11. 18. 15:21

 

 

 

[ 3D Web : Front&Back_Type Script ] 

타입스크립트 : 트랜스파일링이란

 


 

∇ 타입스크립트 : 트랜스파일링

목  차

1. 타입스크립트란?
2. 타입스크립트 트랜스파일링은 왜 필요할까?

 

 


 

Ⅰ. 타입스크립트란?


 

       ∇  TS는 JS의 슈퍼셋이다?

               

               - JS와 TS의 차이점을 찾다 보면, 꼭 나오는 말 :   "  TS는 JS의 슈퍼셋(Superset)  "

 

 

                  ☆ "슈퍼셋"의 의미는??

                       ::  "확대집합"   &  "상위집합"

 


       ∇  어떤 기능을 더 가지고 있을까??

1. 엄격한 타입 정의
2. 인터페이스
3. null/undefined-safe
4. 범용적인 클래스나 메서드를 실현하는 제네릭.

                 

 


 

Ⅱ. 타입스크립트란 트랜스파일링은 왜 필요할까?


   ◎ Node.js 와 브라우저는 JS만 읽을 수 있기 때문에, 

        TS문법으로 작성된 파일을 JS로 바꾸는 과정이 필요합니다. !!

 

            ==   " TS 컴파일러(tsc)가 TS 파일을 JS 파일로 트랜스파일링" 합니다.

 

 

       ∇  "트랜스파일링"에 필요한 tsconfig.json

               :   " tsconfig.json " 은 TS를 JS로 변환시키는 컴파일 설정을 정의한 파일입니다.

                         ->>  tsc나 ts-node 명령어를 실행하면 tsconfig.json을 기준으로 컴파일을 진행합니다.

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

 

 

       ∇  "트랜스파일링" 순서.

 

               1. 스캐너 ( Scanner ) :  scanner.ts

                       == TS 소스 코드를 읽고서, 각각의 문법 요소를 위치 정보를 가진 토큰으로 변환합니다.

 

               2. 파서( Parser ) : parser.ts

                       == 스캐너가 작성한 토큰을 받아서 추상-구문-트리(AST : Abstract Syntax Tree)로 변환합니다.

 

               3. 바인더( Binder ) : binder.ts

                       == AST를 기반으로, 타입 체크의 기본이 되는 "Symbols"를 작성합니다.

                             * Symbols : AST 내부의 declaration nodes 간 연결을 지원합니다.

 

               4. 체커( Checker ) : checker.ts

                       ==타입 체크를 실행합니다.  컴파일러에서 가장 큰 부분입니다.

 

               5. 이미터( Emitter) : emitter.ts

                       ==AST와 체커의 결과를 바탕으로 TS를 JS로 변환해 출력합니다.

                           ++  " emitter.ts "  : TS에서 JS로 트랜스파일을 수행하는 이미터.

                           ++  " declarationEmitter.ts "   :  declaration file(.d.ts)을 생성하는 이미터.