[Typescript] 개발환경 구축 및 컴파일러 사용

VS CODE 사용

TypeScript 설치 명령어

npm i typescript
npm i typescript -g  // -global

 

컴파일 명령어

1. Typescript 컴파일러를 global로 설치 후,

◆ cli 명령어로 파일 컴파일

tsc [typescript 파일]

◆ 특정 프로젝트 폴더에서 Typescript컴파일러 설정에 맞춰 컴파일

tsc --init  // tsconfig.json 파일 생성

{
    "compilerOptions": {
        "module": "commonjs",			/* 어떤 모듈 방식으로 컴파일할지 설정 */
        "target": "ES2015",			/* 어떤 버전으로 컴파일할지 설정 */
        "sourceMap": true,			/* sourceMap 처리 여부 */
        "outDir": "dist"			/* 컴파일 후 생성되는 js파일이 생성될 폴더명*/
    },
    "include": ["src/**/*"],			/* 컴파일할 파일 경로를 설정 */
    "exclude": ["node_modules"]			/* 컴파일 대상을 제외하는 옵션 */
}

이렇게 설정을 한 상태에서 tsc 만 실행해도 tsconfig파일에서 설정을 읽어와서 알아서 컴파일 해준다.

좀 더 자세한 사항은 이 사이트를 참고해보면 좋다.

◆ 특정 프로젝트 폴더에서 Typescript컴파일러 설정에 맞춰 컴파일 (watch 모드)

tsc -w

파일의 변경을 감지하고 자동으로 새로 컴파일 해준다.

2. 프로젝트에 Typescript 컴파일러를 설치 후,

◆ .bin 안의 명령어로 파일 컴파일

./node_modules/.bin/tsc [typescript 파일]

◆npm 스크립트로 파일 컴파일

/* package.json 파일에서 scripts transpile 설정 후 */

"scripts": {
  "transpile": "tsc",
  "test": "echo \"Error: no test specified\" && exit 1"
},

/* npm 명령어로 실행 */

npm run transpile

◆프로젝트에 있는 Typescript 설정에 맞춰, npm 스크립트로 컴파일

tsconfig.json 파일 생성후 ./node\_modules/.bin/tsc 만 실행해도 됨

◆프로젝트에 있는 Typescript설정에 맞춰, npm 스크립트로 컴파일 (watch 모드)

-w 옵션 붙이기

 

실행

node [컴파일된 javascript 파일]