Typescript 설치

일러두기

프론트앤드 서버는 React.js를 기본으로 두고 있기 때문에 create-react-app의 옵션을 통하여 바로 typescript 버전을 만든다.

만약 React.js의 create-react-app이 아닌 수동으로 만들고 싶다면 아래의 과정을 참조하면 된다.

 

Typescript를 사용하는 이유?

프로젝트가 커짐에 따라 Javascript로는 소스 관리에 버거움이 있다. Typescript를 통하여 보다 편리하게 함수들의 인터페이스 또는 타입들을 알 수 있고 더불어 실수로 인한 오작동 하는 코드를 방지하는 효과도 얻는다.

 

설치

글로벌하게 설치

# npm i typescript -g

 

로컬에만 설치

# yarn add @types/node --save-dev

 

Typescript 설정 파일 제작

# tsc --init

 

또는 아래와 같이 수동으로 프로젝트 루트 폴더에 tsconfig.json 파일을 만들어 다음과 같이 작성한다.

{ 
  "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs",
    "esModuleInterop": true,
    "sourceMap": true,
    "allowJs": true,
    "rootDir": "src",
    "outDir": "output"
  }, 
  "include":["src/**/*"], 
  "exclude": [ 
      "node_modules" 
  ] 
}

 

Visual Studio Code 에서 저장시 JS로 자동 컴파일 하기

TS는 독립적으로 실행될 수 없다. tsc 툴킷을 통하여 JS파일을 생성하고 해당 JS를 Node를 통하여 실행하는 구조이다.

일일히 TS 파일 수정 후 tsc 커맨드를 통해 JS 파일을 생성 할 수도 있으나

이는 매우 번거로우므로 VS Code에서 TS 코드 작성 후 저장시 자동으로 JS 파일을 만들어 주도록 한다.

다음과 같이 진행한다.

 

1. VS Code에서 프로젝트 폴더를 오픈한다.

2. tsconfig.json 파일이 있는지 확인한다. 없으면 위의 과정대로 생성한다.

3. Windows > Run Build Task (Ctrl+Shift+B) 를 눌러 tsc: watch - tsconfig.json 를 선택 하여 실행하면 앞으로 TS 파일 저장시 자동으로 JS 파일도 함께 만들어져 저장될 것이다.

 

* 실행시 "src 어쩌구..." 하는 에러가 날 수도 있다. 이는 src 폴더안에 파일이 없어서 오류를 뱉어내는 것이다.

작업할 TS 소스를 src 폴더에 넣어두면 잘 실행 될 것이다.

* tsconfig.json 파일에서 include는 자동으로 컴파일 할 대상 폴더를 의미 한다. outDir는 컴파일 된 JS 파일들이 들어 갈 폴더를 의미한다.

* 자동 저장을 종료하고 싶다면 Commend Palette (Ctrl+Shift+P) 를 눌러 Tasks: Terminate Running Task 를 선택하고 tsc: watch - tsconfig.json 를 선택하면 종료 된다.