[TypeScript] Visual Studio Code와 tsconfig.json으로 TypeScript 개발하기

먼저 Visual Studio Code를 설치해야 한다.

설치 방법은 이전에 포스팅한 글에 나와 있다.

아래의 링크를 따라 가서 기본 세팅을 완료 해준다.

 

- 참고 링크
01 TypeScript - 개념 및 환경설정

01 TypeScript - 개념 및 환경설정

 

위의 세팅이 완료 되었다면 tsconfig.json을 사용하는 방법을 알아보자.

 

1. tscofing.json 만들기

기본적인 json 파일 생성 규칙은 다음과 같다.

{
  // 컴파일 옵션
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true
  },
  // 직접 추가
  "files": [
    "index1.js",
    "index2.js"
  ],
  // include, exclude를 이용한 추가
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

컴파일 옵션을 설정하지 않는다면 기본값으로 설정된다.

그리고 파일을 직접 추가하거나 include, exclude를 이용해서 추가해 줄 수 있다.

웬만하면 include, exclude를 활용하는 것이 좋다.

 

컴파일 옵션에 대한 내용은 아래의 링크를 참조하길 바란다.

 

- 참고 링크

www.typescriptlang.org/docs/handbook/compiler-options.html

Documentation - tsc CLI Options

 

2. Configure Task 실행

VS Code에서는 Configure Task로 TypeScript build를 실행시킬 수 있다.

Ctrl + Shft + P(⇧⌘P) 단축기 또는 View > Command Palette를 선택하고 'Configure Task'를 입력한다.

그리고 나서 tsconfig.json을 검색해서 build를 실행해 준다.

'tsc: build - tsconfig.json' 까지 실행하면 .vscode 폴더 하위에 tasks.json 파일이 생성된다.

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": "build",
      "label": "tsc: build - tsconfig.json"
    }
  ]
}

그리고 난 뒤 Ctrl + Shft + B(⇧⌘B) 단축키를 누르면 ts 파일을 js 파일로 컴파일 되면서 js 파일과 map 파일이 생성된다.

터미널에서 해당 js 파일을 실행해 주면 된다.

 

- 참고 링크

https://code.visualstudio.com/docs/editor/tasks

Tasks in Visual Studio Code

 

3. 터미널에서 빌드하기

위의 방법도 좋지만 좀 더 터미널에서 간단하게 빌드할 수도 있다.

package.json에 아래와 같이 추가한다.

 

...

"scripts": {
  "build": "tsc --build",
  "clean": "tsc --build --clean",
  ...
},

...

 

그리고 나서 터미널에서 아래와 같이 입력해준다.

 

$ npm install -g typescript
$ npm run build

 

global로 type 스크립트를 설치하고 빌드를 하면 정상적으로 되는 것을 확인할 수 있다.

 

- 참고자료 : typescript - npm