[ 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)을 생성하는 이미터.
'Front_End [JS기반] > 타입스크립트' 카테고리의 다른 글
[ 3D Web : Front&Back_Type Script ] 타입스크립트 : 타입 선언의 종류 총정리. (2) | 2024.11.20 |
---|---|
[ 3D Web : Front&Back_Type Script ] 타입스크립트의 타입 선언 (0) | 2024.11.18 |
[ 3D Web : Front&Back_Type Script ] 타입스크립트 트랜스파일링 설정 : ' tsconfig ' 의 옵션 총 정리. (2) | 2024.11.18 |
[ 3D Web : Front&Back_Type Script ] 타입스크립트의 정의*동작원리*특징 (1) | 2024.11.18 |
[ 3D Web : Front&Back_Type Script ] Type Script의 개념 및 기초 (0) | 2024.11.14 |