时间戳

首页 > 解决方案 > 使用 tsconfig.json 忽略 *.js 和 *.jsx 文件

reactjs - 使用 tsconfig.json 忽略 *.js 和 *.jsx 文件

问题描述

这是我们尝试过的：

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "allowJs": true,
    "jsx": "react"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "src/**/*.js",
    "src/**/*.jsx",
  ]
}

当我们从命令行运行时，编译器会在和文件tsc中查找错误。例如，我们看到了这些错误。jsxjs

src/components/foo/barHeaderStateOverview.jsx:90:46 
    - error TS8010: 'types' can only be used in a .ts file.

90   generateArbitraryData = (id: string, data: {path: string, title: string}) => {
                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/foo/barHeaderStateOverview.jsx:101:65 
    - error TS1005: ',' expected.

101     const arbitrary = this.generateArbitraryData('weight', data : (string | number));

问题可能是由这种编译器行为引起的：

...如果一个文件 B.ts 被另一个文件 A.ts 引用，则不能排除 B.ts，除非在“排除”列表中也指定了引用文件 A.ts。

我们的一些 *.ts 文件确实会导入 *.js 和 *.jsx 文件。有没有办法告诉编译器不要对 *.ts 文件导入的 *.js 和 *.jsx 文件进行类型检查？

标签： reactjstypescripttsc

解决方案

对我们来说，这个 tsconfig 文件可以忽略所有 js 和 jsx 文件。

{
  "compilerOptions": {
    "outDir": "build",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "sourceMap": true,
    "checkJs": false,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "experimentalDecorators": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "baseUrl": "./",
    "paths": {
      "~/*": ["*"]
    }
  },
  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
  "exclude": ["node_modules", "build", "dist", "src/**/*.js", "src/**/*.jsx"]
}

此外，如果我们在 .jsx|.js 文件中导入 .tsx|.ts 文件，我们必须明确。

import someFile from "./path/to/file.tsx"

我们尚未测试，但如果修改为，您的可能会运行：

    {
      "compilerOptions": {
        "target": "esnext",
        "moduleResolution": "node",
        "allowJs": true,
        "checkJs": false,
        "jsx": "react"
      },
      "include": [
        "./src/**/*.ts", "./src/**/*.tsx"
      ],
      "exclude": [
        "src/**/*.js",
        "src/**/*.jsx",
      ]
    }

我希望这有帮助。我们遇到了同样的问题，我们花了一段时间才把它弄好

推荐阅读