TypeScript / tsconfig

지금까지 TypeScript를 타입 지정해서 에러를 안띄우는 정도로만 알고 있었는데,
React-component npm 라이브러리를 개발하게 되면서 d.ts 파일 즉, 선언 파일을 만들 줄 알아야 돼서
TypeScript 컴파일 공부 해보았다.

ts -> js 컴파일

	$ tsc index.ts

tsconfig.json 생성

	$ tsc --init

tsconfig에 컴파일할 파일 지정하기

{
  "files": ["index.ts"]  // 컴파일할 파일을 지정할때, 여러개 넣을 수 있다.
}


{
 	"include": ["src/**/*"] // src 폴더 아래 점부 컴파일
 }

TIP

와일드 카드 패턴
* : 해당 디렉토리의 모든 파일 검색
? : 해당 디렉토리 안에 파일의 이름 중 한 글자라도 맞으면 해당
** : 하위 디렉토리를 재귀적으로 접근(하위 디렉토리의 하위 디렉토리가 존재하는 경우 반복해서 접근)

exclude 변환하지 않을 폴더 경로 지정

	{
  		"exclude": ["node_modules"]
	}

• 컴파일 대상 경로를 정의하는 속성도 우선 순위가 있다고 한다.
  files > include = exclude

@types 라이브러리와 typeRoots

타입스크립트 설정 파일은 기본적으로 node_modules를 제외하지만 써드 파티 라이브러리의 타입을 정의해놓는 @types 폴더는 컴파일에 포함합니다. 예를 들면 아래와 같습니다.

└─ node_modules
   ├─ @types => 컴파일에 포함
   ├─ lodash => 컴파일에서 제외

여기서 만약 @types의 기본 경로를 변경하고 싶으면 아래처럼 지정할 수 있다.

	{
  		"compilerOptions": {
    		"typeRoots" : ["./my-types"]
  		}
	}

이렇게 되면 타이핑 라이브러리(써드 파티 라이브러리의 타입 정의 라이브러리)의 대상 경로가 node_modules/@types에서 node_modules/my-types로 변경됩니다.

extends
특정 타입스크립트 설정 파일에서 다른 타입스크립트 설정의 내용을 가져와 추가할 수 있는 속성

// config/base.json
{
  "compilerOptions": {
    "noImplicitAny": true
  }
}
// tsconfig.json
{
  "extends": "./config/base"
}

target
타입스크립트 파일을 컴파일 했을 때 빌드 디렉토리에 생성되는 자바스크립트의 버전을 의미합니다. 기본 값인 es3부터 es5, es6 등 가장 최신 버전인 esnext까지 있습니다.

  {
    "target": "esnext"
  }

lib
타입스크립트 파일을 자바스크립트로 컴파일 할 때 포함될 라이브러리의 목록입니다. 이 속성을 활용하는 가장 대표적인 사례는 async 코드를 컴파일 할 때 Promise 객체가 필요하므로 아래와 같은 설정을 해줘야 합니다.

  {
    "lib": ["es2015", "dom", "dom.iterable"]
  }

• 여기서 es2015는 프로미스 객체를 타입스크립트에서 인식할 수 있게 필요한 속성이고, dom 관련 속성은 DOM API를 사용하는 경우 필요합니다.

allowJs
타입스크립트 컴파일 작업을 진행할 때 자바스크립트 파일도 포함될 수 있는지를 설정해주는 속성입니다. 주로 이미 기존에 존재하는 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용할 때 사용하면 좋은 속성입니다.