TypeScript 시작하기 - 환경 구성

지난 포스팅에서 TypeScript에 대한 간략한 설명을 드렸는데요. 해당 포스팅이 궁금하신 분들은 아래의 링크를 참고해주세요.

TypeScript에 대하여 알아보자

 

TypeScript 환경 구성하기

먼저 더 편하고 쉽게 코드를 입력하기 위해 Visaul Sutdio Code를 설치합니다.

Visual Studio Code - Code Editing. Redefined

 

그리고 Extensions에서 TypeScript를 검색한 뒤, JavaScript and TypeScript Nightly를 설치해줍니다.

 

TypeScript를 Compile할 수 있는 Engine이 여러가지가 있는데 저는 Nods Js를 이용하여 Compile할 생각이기 때문에 Node JS를 설치해줍니다.

다운로드 | Node.js

 

이후 npm을 이용하여 TypeScript도 설치해줍니다. npm은 Global(모든 위치에서 사용 가능)과 Local(특정 폴더 내에서만 사용 가능)에 설치해줄 수 있는데요. 두 개의 명령어 모두 정리해놓겠습니다.

 

Windows

# Global
npm install -g typescript
# Local
npm install typescript

Mac

# Global
$ sudo npm install -g typescript
# Local
$ sudo npm install typescript

 

TypeScript가 무사히 설치되었는지는 아래의 명령어를 통하여 확인할 수 있습니다.

# Check TypeScript Compiler Version
tsc -v

 

정상적으로 버전 정보가 노출된다면, Visual Studio Code에서 아래와 같은 json 파일을 만들어줍니다. 해당 설정 파일을 통해 코드 작성 시 필요한 여러가지 구문과 가이드를 제공받을 수 있습니다.

※ tsconfig.json은 TypeScript를 위한 프로젝트 단위의 환경 파일로써 컴파일 옵션과 컴파일 대상에 대한 설정이 존재함

tsconfing.json

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "sourceMap": true
    }
  }

 

이후 test.ts 파일을 생성한 뒤, Ctrl+`로 Terminal을 열어 명령어를 입력함으로써 Compile 과정을 통해 ts 파일을 js 파일로 변환할 수 있습니다.

test.ts

let str1:String = "Hello World";
console.log(str1);

명령어

# Compile Command
tsc test.ts

결과 화면

 

Visual Studio Code에서 편하게 Build를 하고 싶다면, Ctrl + Shft + P(⇧⌘P)를 눌러 Configure Default Build Task > build ~를 입력 및 선택하면 build와 관련된 내용이 담긴 tasks.json 파일이 생성됩니다.

과정1

과정2

 

이후 Ctrl + Shft + B(⇧⌘B)를 누를 경우 정상적으로 Build가 수행되면서 .js 파일과 .js.map 파일이 생성됩니다.

※ 만약 에러가 뜬다면, 관리자 권한으로 CMD를 켠 뒤 아래의 명령어를 실행해주시면 정상적으로 Compile이 될 겁니다.

# need to Administator and root
Set-ExecutionPolicy Unrestricted

 

그리고 Terminal에서 node를 이용하여 Compile된 .js 파일을 실행하면 결과를 확인할 수 있습니다.

node 실행 결과

 

자동 컴파일 설정

지금까지의 설정으로는 코드가 바뀔때마다 매번 Build를 새로해줘야 합니다. 코드가 변경될 때마다 새로 Compile을 해주려면 tasks.json 파일을 아래와 같이 변경해주면 됩니다.

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

자동 컴파일 설정

 

Source 및 Output Folder 설정

Source와 Output의 경로를 설정하려면 tsconfig.json 파일을 아래와 같이 수정해주면 됩니다.

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "outDir": "./out",
      "rootDir": "./src"
    }
  }

Source 및 Output Folder 설정