TypeScript 사용하기

 

1. TypeScript 란?

자바스크립트는 동적 타입의 언어로 실행시에만 오류를 발견할 수 있습니다. 하지만 타입스크립트는 정적 타입의 컴파일 언어로 코드 작성 단계에서 타입을 체크해 오류를 확인 할 수 있고 미리 타입을 결정하여 실행 속도가 빠르다는 장점이 있습니다. 타입스크립트는 앞서 말했든 컴파일 언어로 자바스크립트로 다시 변환해야 사용이 가능합니다.

 

2. TypeScript 설정

2-1. TypeScript 설치

npm install -g typescript

 

2-2. TypeScript 파일 생성

ts 확장자를 사용하여 생성.  파일명.ts

 

3. TypeScript -> script 컴파일

3-1. 기본 컴파일

ts파일을 html파일에 붙혀서 사용하려면 스크립트 파일로 변환이 필요하다.

변환시 ES3의 형태로 변환되기 때문에 최신 버전의 ES6로 변환하려면 설정이 필요하다. 해당설정은 (3-3)에서 확인 할수 있다.

tsc main.ts

 

3-2. 기본 컴파일 Watch Mode

수정시 계속 변환하는 상태를 확인하려면 watch mode를 설정해준다.

tsc main.ts -w

 

3-3. config 파일을 통한 컴파일 설정

• compilerOptions : 컴파일 옵션
  • rootDir : 루트 폴더 경로 (타입스크립트 작성경로)
  • outDir : 빌드되는 폴더 경로 (스크립트가 들어갈 경로)
  • target : 자바스크립트 버전 설정
  • noEmitOnError : true 일경우 에러가 있을 경우 컴파일 되지 않음.
  • module: 컴파일을 마친후 자바스크립트가 사용하는 모듈 (ESNext ES 6 이후의 모든 버전)
• include : 위에서 설정한 루트 폴더 경로 외의 경로에서 타입스크립트 생성시 자바스크립트 파일로 변환을 막아준다.

{
    "compilerOptions": {
        "rootDir": "./src",
        "outDir": "./build/js",
        "target": "ES6",
        "noEmitOnError": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "esModuleInterop": true,
        "lib":["ESNext","DOM"], 
        "strict": true
    },
    "include": [
        "./src/**/*.ts"
    ]
}

 

터미널 환경에서 컴파일 설정 실행

tsc -w