[TypeScript] 타입스크립트 프로젝트 세팅

라이브러리 설치와 TSC (TypeScript Compile)

우선 타입스크립트 파일을 브라우저가 인식할 수 있도록 자바스크립트로 변환하는 작업이 필요하다. 이를 컴파일 (compile) 이라고 한다.

node 버전 확인

우선 Node.js 가 설치되어있지 않다면 설치부터 하자.

Mac

brew install node

Windows
설치하기 : https://nodejs.org/ko/

ts파일이 있는 디렉터리에서 터미널을 열고 node 버전을 확인한다. 10.x.x 이상으로 설치되어있는지 확인한다.

node -v

타입스크립트 라이브러리 설치

tsc (typescript compile) 명령어를 사용하기 위해 타입스크립트 라이브러리를 시스템 레벨에 설치하는 과정이다.

npm i typescript -g

NPM은 Node Package Manager의 약자로, NodeJS에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 하며 설치 및 관리할 수 있는 CLI를 제공한다.

index.ts 파일을 컴파일하여 index.js로 변환

tsc index.ts

매번 tsc로 컴파일하기보다는 webpack같은 모듈 번들러나 웹 자동화 도구를 이용하여 반복적인 명령어를 자동화할 수 있다. 타입스크립트를 하기 위해 webpack을 알고있으면 더욱 좋다.

타입스크립트 설정 파일 (tsconfig.json) 생성

디렉터리에 tsconfig.json 파일이 있다면 해당 디렉터리가 TypeScript 프로젝트의 루트가 된다. 여기서는 프로젝트를 컴파일하는 데 필요한 루트 파일과 부가적인 컴파일러 옵션을 지정한다.

// tsconfig.json 

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noImplicitAny": true
  }
}

옵션 설명

• allowJs : JavaScript 파일의 컴파일을 허용.
• checkJs : @ts-check 와 같은 역할으로 .js 파일에 오류를 보고한다.
  --allowJs와 함께 사용한다.
• noImplicitAny : any 타입으로 암시한 표현식과 선언에 오류를 발생 시킨다. true로 되어있다면, 모든 타입에 대해서 가장 기본적인 타입인 'any'라도 명시적으로 넣으라는 의미이다.

아래 docs를 참고하여 추가적인 컴파일러 옵션을 확인하자.

• TSConfig Reference - Docs on every TSConfig option https://www.typescriptlang.org/tsconfig

• TypeScript 한글 문서
  https://typescript-kr.github.io/pages/compiler-options.html

타입스크립트는 작성한 코드를 다른 브라우저에서 호환될 수 있도록 변환해주는 도구인 플레이그라운드(playground) 를 제공하고 있다.

// typescript 

class Student {
    name: String;
    constructor(name: String) {
        this.name = name;
    }
}

// target - ES5

"use strict";
var Student = /** @class */ (function () {
    function Student(name) {
        this.name = name;
    }
    return Student;
}());

• TS Playground
  https://www.typescriptlang.org/play?#code/Q

• Babel
  https://babeljs.io/