TypeScript. 컴파일러 단계

1. 타입스크립트 컴파일 명령어 실행 : $ tsc

2. TSConfig 읽기

• 컴파일러는 tsconfig.json파일을 읽어 프로그램을 설정하고 시작파일을 가져온다. tsconfig.json에는 프로젝트 컴파일 옵션과 시작파일의 설정이 정의되어 있다.

3. 파일 전처리 및 import

• 시작파일을 기준으로 모든 가능한 파일을 전처리하고 파일간의 import 구문을 따라가면서 필요한 모듈을 수집한다.

4. 토크나이징(스캔) 및 파싱

• 컴파일러는 파일의 텍스트를 토큰화하고 이를 파싱하여 Syntax tree를 생성한다.
  
  

5. 바인더

• 바인더 : Syntax tree안의 식별자를 심볼로 변환. (변수, 함수 등의 이름을 해당하는 심볼에 연결한다.)
  

  🔥Symbol Table : 스코프별 심볼을 바이딩한 것을 표시한다. (식별자 + 타입키워드 + 속성)
  

6. 타입검사기

• 변수 및 표현식에 할당된 값들이 타입에 일치하는지 검사한다.
  

7. 변환(transform)

• tsconfig 타겟옵션에 따라 Syntax tree 변경한다.(ECMAScript 버전 및 다른 옵션에 따라 다양하게 변환)
  

8. 발행(emit)

• 최종적으로 JS파일, 타입정의파일(.d.ts), 다른 설정에 따른 파일을 생성한다.

예시

// main.ts
const msg: string = 'hello, TypeScript!
console.log(message)


// tsconfig.json
{
 "compileoptions" : {
    target : es5
    outDir : ./dist
    rootDir : ./src
    },
    include : ["src/**/*.ts"],
    exclude : ["node_modules"]
}

1. tsc 후, tsconfig.json을 읽는다. 여기에는 시작파일과 컴파일 옵션에 대한 정보가 들어간다.
2. 파일이 아니므로 import 하지않고, 필요한 모듈이 없기 때문에 수집하지 않는다.
3. 텍스트를 토큰화하고 파싱해서 syntax tree를 생성한다.
4. syntax tree안의 식별자를 심볼로 변환한다. (스코프별로 심볼을 표시하는 symbol table이 생성된다.)
5. msg 변수타입이 문자열임을 확인하고 할당값이 문자열인지 확인한다.
6. 특별한 변환이 없다.
7. 최종적으로 ./dist 디렉토리에 컴파일된 파일(main.js, main.d.ts)이 생성된다.