2. 타입 스크립트 개발 환경 구성

이번 글에서는 타입 스크립트를 연습하기 위해 개발 환경을 구성해보자. 개발 환경은 NodeJS 프로젝트로 구성하는 것이 쉽기 때문에 NodeJS 패키지를 설치하여 구성하도록 하겠다.

 

만약 NodeJS가 설치되어있지 않다면 아래의 경로에서 NodeJS를 설치하자. 참고로 이 글에서 설명하는 기준이 되는 OS는 윈도 10이다.

 

nodejs.org/ko/

Node.js

 

NodeJS 설치가 완료되었다면 커맨드 창을 열고 (윈도 키 + R > cmd 입력 후 엔터) 타입 스크립트 연습용 프로젝트를 생성할 경로로 이동한다.

 

cd 타입 스크립트 연습용 프로젝트 경로

 

다음 아래의 명령어로 타입 스크립트에 필요한 패키지를 설치한다.

 

npm i -D typescript ts-node @types/node

 

설치한 패키지에 대한 설명은 아래와 같다.

 

패키지 명	설명
typescript	타입 스크립트 기본 모듈.
ts-node	타입 스크립트를 컴파일 함과 동시에 실행하는 모듈.
@types/node	타입 스크립트가 해석하지 못하는 기본 모듈을 지원하기 위한 모듈.

 

NPM Scope 패키지란?

기본적으로 NPM 패키지와 동일하지만, 하부에 트리 구조로 서브 패키지들을 포함하고 있는 NPM 패키지를 말한다. NPM Scope 패키지는 각 NPM 사용자와 조직이 자체 범위를 가지고 있으며, 이 범위 내에서 여러 하위 패키지들을 추가하여 구성된다. NPM Scope 패키지는 이름 앞에 @가 붙어있어 일반 패키지와 구분할 수 있다.

 

이 과정까지 진행하고 나면 경로에 node_modules 폴더와 package.json 파일이 생성된 것을 확인할 수 있다. 다음은 타입 스크립트의 컴파일러 옵션 파일을 수정할 차례이다. 아래의 명령어로 타입 스크립트 설정 파일을 생성하자.

 

tsc --init

 

위의 명령어를 실행하면 경로에 tsconfig.json 파일이 추가되었음을 확인할 수 있다. 생성된 tsconfig.json 파일을 열어보면 아래와 같은 구조로 되어있다.

 

{
  "include": ["..."]               // 타입 스크립트 컴파일러가 적용될 범위를 경로로 전달
  "compilerOptions": {... }   // tsc 명령어의 첫 번째 파라미터인 컴파일러 옵션
}

 

생성된 tsconfig.json 파일은 개발을 진행하는데 필요한 여러 옵션들이 모두 꺼져있기 때문에 필요한 옵션은 개발자가 직접 활성화해야 한다. tsconfig.json 파일의 옵션에 대한 설명은 아래의 링크를 참고하자.

 

www.staging-typescript.org/tsconfig

TSConfig Reference - Docs on every TSConfig option

 

나는 타입 스크립트 연습을 위해 아래의 옵션들만 사용하였다.

 

옵션명	설명
target	타입 스크립트를 컴파일하여 변환되는 자바스크립트의 버전을 설정한다. (기본값 ES5)
module	코드가 동작할 대상 플랫폼에 맞는 모듈 시스템을 설정한다. 웹브라우저라면 amd, NodeJS라면 commonjs로 설정한다.
downlevelIteration	target 키에 설정된 자바스크립트 버전이 낮더라도 ES6의 문법을 사용하고자 할 때 설정한다. 예를 들어, 반복기나 생성기를 사용하려면 반드시 true로 설정해야 한다.
strict	엄격한 타입 검사를 수행한다.
noImplicitAny	Any 타입을 사용할 수 없도록 한다.
moduleResolution	모듈의 해석 방식을 설정한다. module 키가 commonjs라면 반드시 'node'로 설정해야 한다.
baseUrl	타입 스크립트를 컴파일하여 변환된 자바스크립트 파일을 저장하는 디렉터리를 설정한다. baseUrl은 그 기준이 되는 디렉터리로 보통 tsconfig.json 파일이 있는 현재 디렉터리로 설정한다.
outDir	baseUrl 키에 설정된 경로의 하위 디렉터리를 설정한다.
paths	소스 파일에서 import로 모듈을 포함할 때의 경로를 설정한다. import로 포함하는 모듈이 node_modules일 경우 node_modules/*를 넣어준다.
esModuleInterop	웹브라우저에서 동작을 목표로 만들어진 모듈을 NodeJS 환경에서 사용할 경우 활성화한다.

 

앞으로 사용할 tsconfig.json의 구성은 아래와 같다.

 

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "downlevelIteration": true,
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "outDir": "dist",
    "paths": {"*": ["node_modules/*"]},
    "esModuleInterop": true
  }
}

 

자, 이제 타입 스크립트를 동작시킬 기본 준비가 모두 끝났다. 프로젝트 경로로 이동하여 tsconfig.json 파일이 있는 경로에서 src/index.ts를 생성하자.

 

 

다음 index.ts 파일에 아래와 같이 타입 스크립트 예제 코드를 넣어주자.

 

const hello: string = "Hello TypeScript !!"

console.log(hello)

 

마지막으로 VS Code의 터미널을 열어 ts-node ./src를 실행하면 아래와 같이 정상적으로 실행되는 것을 볼 수 있다.

 

 

타입 스크립트 학습을 위한 준비가 완료되었다. 다음 글에서는 타입 스크립트의 객체와 타입에 대하여 정리하도록 하겠다.

 

오늘은 여기까지~