[react]CRA-tsconfigを分析します.json
11596 ワード
CRA + Typescript npx create-react-app test-app --template typescript
CRA+Typescriptをインストールするときに何気なく通るtsconfig.json default設定の解釈を作成します.// tsconfig.json 설정
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}
compilerOption
コンパイルプロセスに関するオプションtarget : string
コンパイルするECMAScriptバージョンの設定
ex)ES 3(基本)、ES 5、ES 6、ES 2015、ES 2016、ES 2017、ES 2018、ES 2019、ES 2020、ES 2021、ES 2022、ESNEXTlib : array
コンパイル時に使用するライブラリファイルのリストallowJs : boolean
Javascriptファイルのコンパイルを許可
npx create-react-app test-app --template typescript// tsconfig.json 설정
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}コンパイルプロセスに関するオプション
target : stringコンパイルするECMAScriptバージョンの設定
ex)ES 3(基本)、ES 5、ES 6、ES 2015、ES 2016、ES 2017、ES 2018、ES 2019、ES 2020、ES 2021、ES 2022、ESNEXT
lib : arrayコンパイル時に使用するライブラリファイルのリスト
allowJs : booleanJavascriptファイルのコンパイルを許可
skipLibCheck : boolean宣言ファイル(.d.ts)のタイプチェックをスキップするかどうか
esModuleInterop : booleanCommonJSとESモジュール間の相互運用を許可するかどうか
/*
test 모듈이 CommonJS 문법으로 export 되었다고 가정
*/
import test from "test"; // ❌, import 호환이 안 됨
import * as test from "test";
test();allowSyntheticDefaultImports : booleandefault exportがimportを許可するかどうか
strict : booleanすべての厳格なタイプの検証オプションを有効にするかどうか
forceConsistentCasingInFileNames : boolean使用するファイルの名前を正しく付けるかどうか
大文字と小文字
noFallthroughCasesInSwitch : booleanswitch文でFallthrough Caseが見つかった場合、エラーは発生しませんか?
module : string使用するモジュールシステムの設定
ex) None, ES6, ES2015, ES2020, ES2022, ESNEXT, AMD, CommonJS, Node12, NodeNext, System, UMD
moduleResolution : stringモジュール分析方法の設定
ex) node, classic
resolveJsonModule : boolean拡張子は.jsonのモジュールとしてインポートを許可するかどうか
isolatedModules : booleanすべてのファイルをモジュール化するかどうか
noEmit : booleanTypescriptを単純なタイプチェックに使用するかどうか
jsx : stringJSXコードのコンパイル方法の設定
ex) react, react-jsx, react-jsxdev, preserve, react-native
include
Typescriptコンパイルターゲットに含めるファイルのリスト// tsconfig.json 주석 버전
{
"compilerOptions": {
"target": "es5", // 컴파일할 ECMAScript 버전 설정
"lib": ["dom", "dom.iterable", "esnext"], // 컴파일 과정에서 사용될 라이브러리 파일 목록
"allowJs": true, // Javascript 파일 컴파일 허용 여부
"skipLibCheck": true, // 선언 파일(.d.ts)의 타입 확인 생략 유무
"esModuleInterop": true, // CommonJS와 ES Modules 간의 상호 운용성이 생기게 할 지 여부
"allowSyntheticDefaultImports": true, // default export가 없어도 import가 가능하게 할 지 여부
"strict": true, // 모든 엄격한 타입 확인 옵션 활성화 여부
"forceConsistentCasingInFileNames": true, // 사용할 파일의 이름을 정확하게 작성 여부
"noFallthroughCasesInSwitch": true, // switch 문에서 Fallthrough Case가 발견되면 에러를 발생 여부
"module": "esnext", // 사용될 모듈 시스템 설정
"moduleResolution": "node", // 모듈 해석 방법 설정
"resolveJsonModule": true, // 확장자가 .json인 모듈의 import 허용 여부
"isolatedModules": true, // 모든 파일을 모듈화하여 작성할 것인지에 대한 여부
"noEmit": true, // Typescript를 단순 타입 확인용으로 사용할지에 대한 여부
"jsx": "react-jsx" // JSX 코드를 어떻게 컴파일할지 설정
}, // 컴파일 과정에 관련된 옵션
"include": ["src"] // Typescript 컴파일 대상에 포함하고 싶은 파일들의 목록
}
ソース
詳細
// tsconfig.json 주석 버전
{
"compilerOptions": {
"target": "es5", // 컴파일할 ECMAScript 버전 설정
"lib": ["dom", "dom.iterable", "esnext"], // 컴파일 과정에서 사용될 라이브러리 파일 목록
"allowJs": true, // Javascript 파일 컴파일 허용 여부
"skipLibCheck": true, // 선언 파일(.d.ts)의 타입 확인 생략 유무
"esModuleInterop": true, // CommonJS와 ES Modules 간의 상호 운용성이 생기게 할 지 여부
"allowSyntheticDefaultImports": true, // default export가 없어도 import가 가능하게 할 지 여부
"strict": true, // 모든 엄격한 타입 확인 옵션 활성화 여부
"forceConsistentCasingInFileNames": true, // 사용할 파일의 이름을 정확하게 작성 여부
"noFallthroughCasesInSwitch": true, // switch 문에서 Fallthrough Case가 발견되면 에러를 발생 여부
"module": "esnext", // 사용될 모듈 시스템 설정
"moduleResolution": "node", // 모듈 해석 방법 설정
"resolveJsonModule": true, // 확장자가 .json인 모듈의 import 허용 여부
"isolatedModules": true, // 모든 파일을 모듈화하여 작성할 것인지에 대한 여부
"noEmit": true, // Typescript를 단순 타입 확인용으로 사용할지에 대한 여부
"jsx": "react-jsx" // JSX 코드를 어떻게 컴파일할지 설정
}, // 컴파일 과정에 관련된 옵션
"include": ["src"] // Typescript 컴파일 대상에 포함하고 싶은 파일들의 목록
}Reference
この問題について([react]CRA-tsconfigを分析します.json), 我々は、より多くの情報をここで見つけました https://velog.io/@gingaminga/React-CRA-tsconfig.json-해석하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol