tsc compile in React (create-react-app) 需要显式编译标志，尽管我在 tsconfig.json 中设置了它们

Posted 2023-02-22

【中文标题】tsc compile in React (create-react-app) 需要显式编译标志，尽管我在 tsconfig.json 中设置了它们

【英文标题】：tsc compile in React (create-react-app) needs explicit compile flags altough I set them in tsconfig.json

【发布时间】：2021-08-03 15:43:07

【问题描述】：

我首先使用“create-react-app”初始化了一个 react 应用程序，然后在其中添加了 typescript yarn add typescript @types/node @types/react @types/react-dom @types/jest 我用默认值初始化了 tsconfig.json：

  "compilerOptions": 
    "target": "es5",
    "module": "esnext",
    "allowJs": true,
    "jsx": "react-jsx",
    "sourceMap": true,
    "outDir": "./dist",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true
  ,
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ],
  "include": [
    "./src/**/*.tsx"
  ]

如果我尝试编译像 tsc App.tsx 这样的单个文件，我会收到错误消息，提示我需要使用 --jsx 标志和 --esModuleInterop 标志。但是我已经在 tsconfig.json 中设置了它们，为什么我必须在命令行中明确指定它们？ 只能这样：tsc index.tsx --jsx preserve --esModuleInterOp 但为什么呢？

【参考方案1】：

来自docs：

tsc index.ts

仅使用 编译器默认值（不是项目的 tsconfig）为 index.ts 发出 JS

而且，您不能在 CLI 上specify file/s to compile and the tsconfig file：

tsc index.ts tsconfig.json // NOT ALLOWED

因此，如果您使用 CLI 仅编译一个或多个文件，您必须提供选项（在本例中为 jsx 和 esModuleInterOp）或create new tsconfig file that extends the existing one, and add your file to it。

【讨论】：

好的，谢谢，当我编译整个项目时，我的 tsconfig.json 在什么情况下会被应用？或者无论如何在什么情况下？

据我了解您的问题，首先您使用 CRA 设置一个 React 项目。然后你added typescript。因此，现在您可以运行命令 npm run build 或 yarn build 来创建 React Build，并且在构建项目时将自动使用 tsconfig 文件（通过 react-scripts 和 webpack）。你还想要别的吗？

见TypeScript tsc does not respond anything。如果要查看使用 tsconfig 编译的 JS 文件（用于学习目的），需要将 tsconfig 文件中的noEmit 删除或设置为false。

"在什么情况下，我编译整个项目时会应用我的 tsconfig.json？"：只需运行命令：tsc，它就会找到并使用 tsconfig文件。或者tsc --project tsconfig.json。