2장 타입스크립트 프로젝트 생성과 관리

2-1 타입스크립 프로젝트 만들기

타입스크립트 개발은 노드제이에스 프로젝트를 만든 다음, 개발 언어를 타입스크립트로 설정하는 방식으로 진행. 노드제이에스 프로젝트는 디렉터리를 하나 만들고 여기에 package.json이란 이름의 파일을 만드는 것으로 시작한다.

 

package.json은 노드제이에스가 관리하는 패키지 관리 파일로서 프로젝트 정보와 관련 패키지가 기록된다. 즉, 필요한 패키지를 관리할 수 있다.

프로젝트 생성자 관점에서 패키지 설치하기

npm install 혹은 npm i 명령으로 설치가능하다. 이때 패키지 설치 명령은 두 가지 옵션을 줄 수 있다.

• —save : 프로젝트를 실행할 대 필요한 패키지로 설치한다. 패키지 정보가 package.json dependencies 항목에 등록된다
• —save-dev : 정보가 devDependencies 항목에 등록된다.

타입스크립트 프로젝트는 보통 -D 옵션으로 설치해 등록하는 것이 좋다. 이 프로젝트를 전달받아서 이용하는 다른 개발자의 컴퓨터에 패키지가 전역에 설치되어 있지 않을 수도 있기 때문이다.

 

타입스크립트는 기본적으로 ESNext 자바스크립트 문법을 포함하고 있지만, 자바스크립트와는 완전히 다른 언어이다. 즉, 자바스크립트 컴파일러는 a ⇒ a + 1 과 같은 코드를 동작시킬 수 있지만, 타입스크립트 컴파일러는 (a:number_: number ⇒ a + 1 처럼 타입이 명시적으로 설정되어 있어야만 코드가 문법에 맞게 작성되었는지를 검증해 코드를 동작시킨다.

 

타입스크립트는 또한 웹 브라우저나 노드제이에스가 기본으로 제공하는 타입들의 존재도 그냥은 알지 못한다. 예를 들어, Promise와 같은 타입을 사용하려면 @types/node라는 패키지를 설치해야한다.

npm i -D @types/node

tsconfig.json 파일 만들기

타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정 파일인 tsconfig.json파일이 있어야 한다. 이 파일은 tsc —init 명령으로 만들 수 있다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

2-2 모듈 이해하기

타입스크립트에서는 index.ts와 같은 소스 파일을 모듈(module)이라고 한다. 보통은 코드 관리와 유지 보수를 편리하게 하려고 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할한다. 이러한 작업을 모듈화라고 한다.

 

하지만 이처럼 소스코드를 여러 개 모듈로 분할하면 어떤 모듈에 어떤 내용이 있는지를 서로 알게 해줘야 한다. 타입스크립트는 이를 위해 export와 import라는 키워드를 제공한다. export는 기능을 제공하는 쪽에서 사용하고 import는 다른 모듈의 기능을 이용하는 쪽에서 사용하는 키워드이다.

2-3 tsconfig.json 파일 살펴보기

앞에서 만든 tsconfig.json파일을 보면 다음처럼 구성되어있다.

{
  "compilerOptions": {...},
  "include": [...]
}

compilerOptions 항목은 trsc 명령 형식에서 옵션을 나타내고, include 항목은 대상 파일 목록을 나타낸다. include 항목에서 src의 하위 항목 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미이다.

 

module 키

• compilerOptions 항목의 module 키는 동작 대상 플랫폼이 웹 브라우저인지 노드제이에스인지를 구분해 그에 맞는 모듈 방식으로 컴파일 하려는 목적으로 설정한다. 플랫폼에 따라 다음과 같은 값을 설정할 수 있다.

웹 브라우저에서 동작 : amd
노드제이에스에서 동작 : commonjs

moduleResolution 키

• module 키의 값이 commonjs이면 노드제이에스에서 동작하는 것을 의미하므로 , moduleResolution 키값은 항상 node로 설정한다. 반면에 amd이면 키 값은 classic으로 설정한다.

target 키

• target 키에는 트랜스파일할 대상 자바스크립트의 버전을 설정한다. 대부분 es5를 키값으로 설정한다. 만일 최신 버전의 노드제이에스를 사용한다면 es6을 설정할 수 있다.

baseUrl / outDir 키

• baseUrl 과 outDir 키에는 트랜스파일된 ES5 자바스크립트 파일을 저장하는 디렉터리를 설정한다.
• 현재 디랙터리를 의미하는 “.” 로 baseUrl 키 값을 설정하는 것이 보통이다.
• outDir키는 baseUrl 설정값을 기준으로 했을 대 하위 디렉터리의 이름이다. 이 키는 dist라는 값을 설정하면 빌드된 결과가 dist 디렉터리에 만들어진다.

esModuleInterop 키

• 오픈소스 자바스크립트 라이브러리 중에는 웹 브라우저에서 동작한다는 가정으로 만들어 진 것이 있는데, 이들은 commonJS 방식으로 동작하는 타입스크립트 코드에 혼란을 줄 수 있다. 따라서 패키지가 동작하려면 키값을 반드시 true로 설정해야 한다.