Typescript: Allow overrides in tsconfig

[donaldpipowitch]

Search Terms

• tsconfig
• overrides
• eslint
• glob

Suggestion

It would be nice if tsconfig.json files would allow an overrides section which works in the same way as ESLint. Here I have just one config file in my root for all kind of files and use cases. TypeScript currently needs multiple tsconfig.json files.

Use Cases

As far as I know editors like VS Code look for the nearest tsconfig.json for proper TypeScript support. This make it hard to properly type files which are used for different environments (e.g. source code vs tests vs storybook examples and so on) in the same directory, which seems to be a common convention nowadays (e.g. src/file.ts, src/file.test.ts, src/file.stories.ts).

Most people seem to ignore this fact which makes test globals like describe available in source code files.

I once tweeted about this with a small example:

Examples

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "skipLibCheck": true,
    "target": "es2017",
    "types": []
  },
  "overrides": [
    {
      "include": ["src/**/*"],
      "exclude": ["src/**/*.test.ts"],
      "compilerOptions": {
        "jsx": "react",
        "types": ["webpack-env"],
        "plugins": [
          {
            "name": "typescript-styled-plugin"
          }
        ]
      }
    },
    {
      "include": ["src/**/*.test.ts"],
      "compilerOptions": {
        "types": ["jest", "node"]
      }
    }
  ]
}

Checklist

My suggestion meets these guidelines:

• [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
• [x] This wouldn't change the runtime behavior of existing JavaScript code
• [x] This could be implemented without emitting different JS based on the types of the expressions
• [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• [x] This feature would agree with the rest of TypeScript's Design Goals.

[AnyhowStep]

Maybe they shouldn't be mixing test and source files?

The extends, files, include and exclude options can be used in most cases,
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends

https://github.com/Microsoft/TypeScript/issues/8435#issuecomment-216692451

https://github.com/microsoft/TypeScript/issues/8435#issuecomment-216694219

[donaldpipowitch]

Maybe they shouldn't be mixing test and source files?

That's what I suggest as well, but I'm not the majority as far as I can tell. The community seems to prefer it differently.

[donaldpipowitch]

I understand the old comment from @mhegazy that a tsconfig.json matches one tsc call. Maybe we need a tsconfig-compose.json or something similar in that case. Something which editors can automatically pick up to get the correct project configuration. Even Microsofts React Starter mixed source and test files and now recommends CRA which does the same. (It's also not just tests and sources. It can be some configuration files, storybook stories and so on mixed in the same directory.)

[leethree]

mixing test and source files

It's called "colocating" and it's a common pattern in the JavaScript world.

Exhibit A:

In a component-based architecture, we already combine templates, stylesheets, and JavaScript in one directory. As it makes sense to group these tightly-coupled files together, including unit tests in this selection is the natural extension of the underlying model.

https://islovely.co/posts/colocating-unit-tests

Exhibit B:

It’s so much nicer to colocate tests with sources (either separate folder or *.test.js files). Can’t see any reasons to do it any other way.

https://twitter.com/dan_abramov/status/762658867327172608?lang=en

[donaldpipowitch]

FYI: I haven't tried it, but it could be that this problem can now be solved by having “Solution Style” tsconfig.json Files.

Something like this:

// tsconfig.json
{
    "files": [],
    "references": [
        { "path": "./tsconfig.src.json" },
        { "path": "./tsconfig.test.json" },
    ]
}

If that works it would probably make this issue obsolete.

[aleclarson]

I've tried the "solution project" approach without success:
https://gist.github.com/aleclarson/6ae9a3b6b9d06c492fb9a3b6ec395411