Ignore *.js and *.jsx files with tsconfig.json

Question

This is what we have tried:

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

When we run tsc from the command line, the compiler is finding errors in jsx and js files. For instance, we are seeing these errors.

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));

The problem is probably resulting from this compiler behavior:

... if a file B.ts is referenced by another file A.ts, then B.ts cannot be excluded unless the referencing file A.ts is also specified in the "exclude" list.

Some of our *.ts files do indeed import *.js and *.jsx files. Is there a way to tell the compiler not to type check those *.js and *.jsx files that the *.ts file import?

Answer 1

For us, this tsconfig file worked to ignore all js and jsx files.

{
  "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"]
}

Additionally if we import .tsx|.ts files in a .jsx|.js file, we have to be explicit.

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

We haven't tested but yours might run if modified to:

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

I hope this helps. We had the same issue and took a while for us to get it going right