.tsconfig
컴파일러 옵션
프로젝트에 필요한 tsconfig 세팅 옵션. 더 많은 옵션은 👉 TSconfig options에서 확인할 수 있다.
{
"compilerOptions": {
// Language and Environment
// 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
// tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react', 'react-jsx'
"jsx": "react-jsx",
// JavaScript Support
// js 파일을 ts에서 import해서 쓸 수 있는지
"allowJs": true,
// 일반 js 파일에서도 에러체크 여부
"checkJs": true,
// Modules
// 무슨 import 문법 쓸지 'commonjs', 'amd', 'es2015', 'esnext'
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
// 루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
"rootDir": "./",
// Interop Constraints
"isolatedModules": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
// Emit
"noEmit": true,
// 컴파일시 .d.ts 파일도 자동으로 함께생성 할지 (현재쓰는 모든 타입이 정의된 파일)
"declaration": true,
// 모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
"outFile": "./",
// js파일 아웃풋 경로바꾸기
"outDir": "./",
// 컴파일시 주석제거
"removeComments": true,
// Completeness
"skipLibCheck": true,
// Type Checking
// strict 모드 여부, noimplicit 관련 모드 전부 켜기
"strict": true,
"alwaysStrict": true,
// switch문 이상하면 에러내기
"noFallthroughCasesInSwitch": true,
// null, undefined 타입에 이상한 짓 할때 에러 여부
"strictNullChecks": true,
// 함수파라미터 (강력하게) 타입 체크 여부
"strictFunctionTypes": true,
// class constructor 작성시 타입체크 강하게
"strictPropertyInitialization": true,
// any타입 금지 여부
"noImplicitAny": true,
// this 키워드가 any 타입일 경우 에러내기
"noImplicitThis": true,
// 쓰지않는 지역변수 있으면 에러내기
"noUnusedLocals": true,
// 함수에서 return 빼먹으면 에러내기
"noImplicitReturns": true,
}
}
절대경로 설정
컴파일러 옵션 중에 baseUrl, paths를 설정하면 ../로 얼룩진 import 구문을 정리할 수 있다. ./ 또는 .로 설정하면, .tsconfig와 같은 루트 폴더로 설정할 수 있다.
다음과 같은 디렉토리 구조일 때,
Coins에서 api.ts를 import하는 예시이다.
root
├── src
│ ├── api.ts
│ └── routes
│ └── Coins.tsx
└── tsconfig.jsonbaseUrl 설정하지 않을 경우
import { fetchCoin } from "../api";baseUrl을 ./ 설정한 경우
import { fetchCoin } from "src/api";baseUrl을 src로 설정한 경우
import { fetchCoin } from "api";더 나아가 paths를 설정하면
baseUrl를 root 경로를 기준으로 하위 디렉토리를 매핑할 수 있다. 특히 baseUrl 옵션은 paths가 명확할 때 지정하도록 권고한다.
배열에 담긴 실제 경로, 예를 들면 src/components/*는 import할 때, components/*로 매핑된다.
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"components/*": [
"src/components/*"
],
"pages/*": [
"src/pages/*"
],
"utils/*": [
"src/utils/*"
],
},
...
},
...
}include / exclude
include
유효한 범위를 지정한다. 파일 이름과 패턴을 배열로 지정하는데,
*: 0개 혹은 그 이상의 문자를 매치한다. (디렉토리x)?: 문자 한개를 매치한다. (디렉토리x)**/: 모든 하위 디렉토리를 매치한다.
.ts,.tsx,.d.ts가 기본적으로 포함되며,allowJS가true로 설정되었을 경우에는.js,.jsx까지 포함된다.
exclude
include에 포함된 파일 중 생략할 파일 이름과 패턴을 지정한다. 패턴은 include 방식과 동일하다.
더 공부해 볼 것
baseUrl을 src로 설정하면 모듈을 import할 땐 어떻게 node_modules에서 절대 경로로 가져올 수 있을까 궁금해졌다.
../node_modules/... 이렇게 되어야 할 것 같은데, useQuery 역시 경로가 node_modules 루트로 나온다. 혹시 아시는 분.. 🙋🏻♀️
import { fetchCoin } from "api";
import { useQuery } from "react-query";However, resolution for a non-relative module name is performed differently. Node will look for your modules in special folders named node_modules. A node_modules folder can be on the same level as the current file, or higher up in the directory chain. Node will walk up the directory chain, looking through each node_modules until it finds the module you tried to load.
처음에는 CRA가 해주는게 아닐까 싶었는데, 조금 찾아보니 Non-relative module이 node_modules 폴더에서 모듈을 로드하는 방식이 따로 있는 것 같다. 이게 내가 궁금한 경로에 대한 부분에 대한 내용인지는 잘 모르겠다..
출처
