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?

Why are you using typescript in a javascript file? You are going to have errors either in the browser because it can't parse TS or though the typescript compiler. Also the allow js option "allow[s] JavaScript files to be compiled." so you probably want that to be false. — kyle, Oct 22 '18 at 22:42
@kyle We are transitioning from Flow to TypeScript. The Flow syntax is similar to the TypeScript syntax, and `tsc` is not able to figure out, "Hey, these `*.js` files are using Flow syntax not TypeScript syntax." — Shaun Luttin, Oct 22 '18 at 22:46
You'll need to provide some stub that could be substituted in its place or remove the import all together. By importing a module, you're asking the compiler to parse and use that module. You can't have it both ways. — Jeff Mercado, Oct 22 '18 at 22:59

score 14 · Answer 1 · answered Apr 01 '20 at 19:21

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

I believe that the only change that was needed was to use: `"checkJs": false` — forforf, Jun 20 '23 at 18:30

Ignore .js and .jsx files with tsconfig.json

1 Answers1

Linked

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

1 Answers1

Linked

Ignore .js and .jsx files with tsconfig.json