Automatically generate and validate `tsconfig.json`

[Timer]

When using TypeScript, we should automatically generate and validate tsconfig.json.

• force isolatedModules: true
• remove .d.ts files from template

[ianschmitz]

I can take this on @Timer. A few thoughts:

We could publish the src/loaders.d.ts contents as @types/react-scripts, which would be picked up automatically by TypeScript. This would also potentially benefit non-TypeScript users of CRA, as they would get some nice typings within VSCode for things like *.svg, *.module.css, etc.

What do you think?

EDIT: Sorry i think GitHub is having issues. I didn't think my original comments got posted. I deleted them in place of this one.

[Timer]

Hey @ianschmitz I never saw this comment until now since GH was having issues all evening 😅. I believe we overlapped on some work -- let's see what we can do about incorporating changes from both of them.

[ianschmitz]

No worries. What are your thoughts on the @types package?

[Timer]

I'm not sure that's the best thing to do, it's very common to not be on the latest react-scripts and keeping the two in sync could become problematic. Right now the toolbox copies it's declaration's file into your project. I think this is OK.

Alternatively, can we add an entry to tsconfig that references something like react-scripts/declarations?

[ianschmitz]

Yeah that would work. I was initially thinking that we could have a dependency in react-scripts that depends on @types/react-scripts, so we would control both sides during releases.

However your idea would probably keep things simpler and be one less package to manage. It just means a little less benefit for non TypeScript users.

[Timer]

It just means a little less benefit for non TypeScript users.

What do you mean by this?

[ianschmitz]

I think VS Code by default will pick up types in your node_modules/@types directory, which will give some IntelliSense in .js files to help you out. You can also add a // @ts-check comment in your .js files to get some inline type checking (it underlines errors in red, etc). So if we depended on an @types package (@types/react-scripts), it should be picked up and used automatically in javascript projects, as well as TypeScript projects 😃.

[ArcticZeroo]

Why was this decision made? The overwriting of my tsconfig is causing tsc to do literally nothing (even with plainly broken code or large code changes it doesn't recompile or error). When I change the include from src to ./src/* (before I had react-scripts 2.x it had no include at all and worked fine...), it starts actually doing stuff but all my custom types break and when I try to add typeRoots it's overridden. Seems like really unfriendly behavior.

There should be a way to opt out of this behavior without ejecting. Seems pretty overzealous

[Timer]

@ArcticZeroo can you please share your full tsconfig.json? That sounds like a TypeScript bug -- src definitely works and shouldn't be any different than ./src/*.

[ArcticZeroo]

@Timer

Sure,
Here's the config that I was using before react-scripts 2.x (the one which works perfectly fine):

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "lib": [ "es2018", "dom" ],
    "jsx": "react",
    "downlevelIteration": true,
    "noImplicitAny": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules"
  ]
}

Here's the one react-scripts really wants me to use for some reason (this one does literally nothing when I type tsc):

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "lib": [
      "es2018",
      "dom"
    ],
    "jsx": "preserve",
    "downlevelIteration": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "allowJs": true,
    "skipLibCheck": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src"
  ]
}

And this one actually does try to compile the files, but completely ignores all my custom types in src/types and fails to compile as a result (only difference is the src include)

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "lib": [
      "es2018",
      "dom"
    ],
    "jsx": "preserve",
    "downlevelIteration": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "allowJs": true,
    "skipLibCheck": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./src/*"
  ]
}