지금까지 TypeScript를 타입 지정해서 에러를 안띄우는 정도로만 알고 있었는데,
React-component npm 라이브러리를 개발하게 되면서 d.ts 파일 즉, 선언 파일을 만들 줄 알아야 돼서
TypeScript 컴파일 공부 해보았다.
ts -> js 컴파일
$ tsc index.ts
tsconfig.json 생성
$ tsc --init
tsconfig에 컴파일할 파일 지정하기
{ "files": ["index.ts"] // 컴파일할 파일을 지정할때, 여러개 넣을 수 있다. } { "include": ["src/**/*"] // src 폴더 아래 점부 컴파일 }
와일드 카드 패턴
* : 해당 디렉토리의 모든 파일 검색
? : 해당 디렉토리 안에 파일의 이름 중 한 글자라도 맞으면 해당
** : 하위 디렉토리를 재귀적으로 접근(하위 디렉토리의 하위 디렉토리가 존재하는 경우 반복해서 접근)
exclude 변환하지 않을 폴더 경로 지정
{ "exclude": ["node_modules"] }
타입스크립트 설정 파일은 기본적으로 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
타입스크립트 컴파일 작업을 진행할 때 자바스크립트 파일도 포함될 수 있는지를 설정해주는 속성입니다. 주로 이미 기존에 존재하는 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용할 때 사용하면 좋은 속성입니다.