tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
"moduleResolution": "node",
"noResolve": false,
"noImplicitAny": false,
"removeComments": false,
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"allowSyntheticDefaultImports": true,
// "keyofStringsOnly": true
},
"typeRoots": ["node_modules/@types", "src/@type"],
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts",
"./node_modules/**/*"
],
"include": ["./src/**/*", "@type"]
}
compilerOptions
target
'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분. es5로 셋팅해놓으면 es5 버전 자바스크립트로 컴파일(변환).
module
- CommonJS (default) : CommonJS 형식으로 모듈을 컴파일한다.
- AMD : Asynchronous Module Definition 형식으로 모듈을 컴파일한다.
- UMD : Universal Module Definition 디자인 패턴을 사용하여 모듈을 컴파일한다.
- System : System.js 형식으로 모듈을 컴파일한다.
- ES6, ES2015, ES2020, ESNext : ESM(ES Module) 방식으로 모듈을 컴파일한다.
moduleResolution
- Classic
- Node
먼저, 컴파일러는 import 하려는 모듈을 탐색한다. 그 탐색 전략으로는 크게 두 가지가 있다. 하나는 Classic이고, 다른 하나는 Node이다. 이러한 전략들은 컴파일러에게 moduleA에 해당하는 모듈을 어디서 찾아야 하는지 알려주는 역할을 수행한다.
만약 그 탐색 과정이 실패했는데 import 하려는 모듈을 비-상대적(Non-relative)으로 표현했다면, 컴파일러는 앰비언트 모듈 선언(Ambient Module Declaration)을 탐색한다.
이렇게까지 했는데도 컴파일러가 moduleA를 끝내 해석하지 못했다면 컴파일 에러를 발생시킨다. 이 경우 그 에러는 error TS2307: Cannot find module 'moduleA'. 같은 형식일 것이다.
noResolve
- false (default) 어플리케이션에 포함된 모든 모듈을 해석한다.
- true 명시적으로 어플리케이션에 포함하기로한 모듈만 해석한다.
noImplicitAny
- true noImplicitAny는 암묵적으로 any 타입을 가지는 것을 허락하지 않는다.
- false noImplicitAny는 암묵적으로 any 타입을 가지는 것을 허락한다.
removeComments
- true 컴파일시 주석을 제거시켜준다.
- false
sourceMap
디버깅과 개발할 때 필요
compilerOptions에서 sourceMap 옵션을 설정하고 터미널에 tsc를 실행하면 디렉토리에 .map 파일이 생성된다. 개발자도구 Sources 탭에서 .ts 파일을 확인할 수 있다.(디버깅에 용이!!!)
allowJs
.ts가 아니어도 타입스크립트가 자바스크립트로 컴파일 함
jsx
ReactJS 쓸 때 사용
allowSyntheticDefaultImports
import React from "react";
instead of:
import * as React from "react";위와 같이 Default로 export된것이 없더라도
따로 명시하지 않고 import를 할수있다. 만약 allowSyntheticDefaultImports의 옵션을 주지 않으면 아래의 에러가 발생한다.
// @filename: utilFunctions.js
Module '"/home/runner/work/TypeScript-Website/
TypeScript-Website/utilFunctions"' has no default export.
const getStringLength = (str) => str.length;
module.exports = {
getStringLength,
};
// @filename: index.ts
import utils from "./utilFunctions";
const count = utils.getStringLength("Check JS");keyofStringsOnly
Object의 key값을 String | Number 에서 String으로만 반환시켜서
보내준다.
typeRoots
typeRoots를 지정하면 typeRoots 아래에 있는 패키지만 포함됩니다. 예를 들어:
{
"compilerOptions": {
"typeRoots" : ["./typings"]
}
}이 설정 파일에는 ./typings의 모든 패키지가 포함되며 ./node_modules/@types의 패키지는 포함되지 않습니다.
types을 지정하면 오직 해당 패키지 목록만 포함됩니다. 예를 들어:
{
"compilerOptions": {
"types" : ["node", "lodash", "express"]
}
}include
{
"include": ["src/**/*", "tests/**/*"]
}include를 통해서 pattern 형태로 원하는 파일 목록을 지정할 수 있다.
include와 exclude 모두 glob 패턴을 지원한다.
'*' : 없거나 하나 이상의 문자열과 일치 (디렉터리 구분자 제외)
'?' : 하나의 문자와 일치 (디렉터리 구분자 제외)
'**/' : 단계에 관계없이 아무 디렉터리와 일치
만약 glob 패턴에 파일 확장자를 선언하지 않으면 typescript가 지원하는 확장자만을 포함한다. 예시로 .ts, .tsx, .d.ts가 있으며 allowJs를 활성화 시키면 .js와 .jsx도 포함된다.
include를 지정해도 files에 지정한 파일들은 제외되지 않는다.
exclude
exclude로 include에 지정한 파일이나 패턴을 제외시킬 수 있다.
주의할 점은 include에 지정하지 않은 파일은 적용되지 않는 점이다.
또한 exclude에 지정하였더라고 import나 /// <reference를 통해서 코드 베이스에 추가될 수 있다.
exclude를 지정하지 않으면 ["node_modules", "bower_components",
"jspm_packages"]와 outDir에 지정한 경로가 기본값이 된다.자주쓰이는 option
"compilerOptions": {
"target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
"module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
"allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지
"checkJs": true, // 일반 js 파일에서도 에러체크 여부
"jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
"declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
"outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
"outDir": "./", //js파일 아웃풋 경로바꾸기
"rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
"removeComments": true, //컴파일시 주석제거
"strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
"noImplicitAny": true, //any타입 금지 여부
"strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기
"strictFunctionTypes": true, //함수파라미터 타입체크 강하게
"strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
"noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
"alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기
"noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
"noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
"noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기
"noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기
}