타입스크립트 패키지

타입스크립트 프로젝트는 보통 typescript와 ts-node 패키지를 설치한다.

npm install typescript ts-node

tsc는 타입이 명시적으로 설정되어 있어야만
코드가 문법에 맞게 작성되었는지를 검증해 코드를 동작시킨다.
따라서 자바스크립트로 개발된 라이브러리들은 추가적으로 @types/가 앞에 붙어있는 라이브러리를 제공해야한다.

@types/가 붙은 라이브러리들은 항상 index.d.ts라는 파일을 가지고 있고,
tsc는 이 파일의 내용을 바탕으로 라이브러리가 제공하는
함수들을 올바르게 사용했는지 검증한다.

또한 타입스크립트는 브라우저나 node가 기본으로 제공하는 타입들도 알지 못하기 때문에,
@types/node 패키지를 설치해야한다.

npm install @types/node

tsconfig.json

타입스크립트 프로젝트는 tsc 설정 파일인 tsconfig.json파일이 있어야 한다.
tsc --init 명령어를 통해 생성할 수 있다.

tsconfig.json의 구성

tsc --help를 실행시켜보면 tsc 컴파일러가 컴파일 옵션과 대상 파일 목록을 입력받는다는 것을 알 수 있다.

tsconfig.json은 다음과 같이 구성되어있다.

{
  "compilerOptions" : {...},
  "include" : ["src/**/*"] // src 디렉터리 뿐만 아니라 하위 디렉터리의 모든 파일
}

compilerOptions는 tsc 명령 형식에서 옵션을 나타내고,
include는 대상 파일 목록을 나타낸다.

module

자바스크립트 모듈은 브라우저에서는 AMD(asynchronous module definition)방식으로 동작하고,
node.js에서는 CommonJS 방식으로 동작한다.

module키는 동작 대상이 브라우저인지 node.js인지 구분해서
해당 대상에 맞는 모듈 방식으로 컴파일하려는 목적으로 설정한다.

commonjs로 설정하고 싶은 경우 "module" : "commonjs",
amd로 설정하고 싶은 경우 "module" : "amd" 로 설정하면 된다.

moduleResolution

위에서 설정한 module의 값에 따라 달라지는데,
commonjs인 경우 node,
amd인 경우 classic으로 설정한다.

target

트랜스파일할 대상 자바스크립트의 버전을 설정한다.
대부분 es5로 설정하고, 최신 버전의 node.js를 사용하는 경우 es6를 설정할 수 있다.

baseUrl과 outDir

트랜스파일된 자바스크립트 파일을 저장하는 디렉터리를 설정한다.

tsc는 tsconfig.json이 있는 디렉터리에서 실행되기 때문에
현재 디렉터리를 의미하는 "."을 baseUrl로 설정하는 것이 일반적이다.
outDir은 컴파일 후 생성되는 자바스크립트 파일이 생성될 폴더명을 값으로 한다.

{
  "baseUrl" : ".",
  "outDir" : "dist",
}

paths

소스 파일의 import문에서 from 부분을 해석할 때 찾아야 하는 디렉터리를 설정한다.
외부 패키지를 import하는 경우 node_modules 디렉터리에서 찾아야하므로
키 값에 node_modules/*를 포함시키면 된다.

// 예시
"paths": {
  "*": [
      "node_modules/*",
      "src/types/*"
    ],
  "@app/*": ["app/*"],
  "@config/*": ["app/_config/*"],
  "@environment/*": ["environments/*"],
  "@shared/*": ["app/_shared/*"],
  "@helpers/*": ["helpers/*"]
},

esModuleInterop

CommonJS 모듈을 ES6 모듈 코드베이스로 가져 오려고 할 때 문제가 발생하는데,
이때 esModuleInterop을 true로 설정해줘야한다.
true로 설정하면 ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 된다.

주로 import 구문에서 에러나는 경우 해당 옵션을 살펴봐야하는 것 같다.

1. ES6 에서는 import *형태로 가져온 경우 함수로 사용할 수 없다.
2. default export가 없는 라이브러리

위의 상황에서 에러가 생긴다면 esModuleInterop을 true로 설정해야한다.

allowSyntheticDefaultImports

불러오려는 모듈에 default export가 없을 때도 import as * XXX가 아닌 import XXX를 사용할 수 있도록 하는 설정이다.
esModuleInterop 프로퍼티가 true로 지정되면 기본적으로 이 프로퍼티도 true로 지정이 된다.

sourceMap

"sourceMap" : true인 경우 js.map 파일이 만들어지는데,
이 파일은 변환된 자바스크립트 코드가 타입스크립트 코드의 어느 부분에 해당하는지를 알려준다.
주로 디버깅할 때 사용된다.

downlevelIteration

generator(생성기)가 정상적으로 동작하려면 해당 옵션이 true로 설정되어있어야 한다.

noImplicitAny

타입스크립트 컴파일러는 function(a,b)처럼 매개변수에 타입이 명시되지 않은 경우
any 타입을 설정한 것으로 간주하는데,
noImplicitAny를 true로 설정하면 위의 상황에 있는 코드에 문제가 있음을 알려준다.

모듈

export

function 키워드 앞 뿐만 아니라 interface, class, type, let, const 키워드 앞에도 export를 쓸 수 있다.

export interface Person {
  name: string
  age: number
}

export const makePerson = (name: string, age: number):Person => ({name, age})

import

export로 내보낸 것들을 불러올 때 사용하는 키워드이다.

import {~, ~, ..} from '파일 상대 경로'

가장 기본적인 형태로, 여러개를 한번에 부를 수 있다.

import {Person, makePerson} from '파일 상대 경로'

import * as ~ from '파일 상대 경로'

as 키워드를 이용해 내보낸 모듈의 이름을 재설정할 수 있다.

export default

자바스크립트와의 호환성을 위해 export default 구문을 제공한다.
export default는 하나의 모듈이 내보내는 기능 중 딱 한 개에만 붙일 수 있다.
즉, 하나의 모듈 파일 안에 한 개의 export default만 존재ㅏㄹ 수 있다.

export default가 붙은 기능은 import 시, {} 없이 사용할 수 있다.

export default interface Person {
  name: string
  age: number
}

// 다른 파일
import Person from '파일 상대 경로'

참고
- do it! 타입스크립트 프로그래밍
- https://it-eldorado.tistory.com/128