Allow overrides in tsconfig
See original GitHub issueSearch 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:
- This wouldn’t be a breaking change in existing TypeScript/JavaScript code
- This wouldn’t change the runtime behavior of existing JavaScript code
- This could be implemented without emitting different JS based on the types of the expressions
- This isn’t a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
- This feature would agree with the rest of TypeScript’s Design Goals.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:119
- Comments:17 (4 by maintainers)
Top GitHub Comments
Does anyone know when a solution for the problem specified by the author will be available? Like some people here mentioned, it is a common pattern to put source and test files together. Another example where defining tsconfig for specific files only would be useful is Jest + Cypress. Both of these provide global definitions for methods like expect or describe. Now with the recent addition of Cypress Components I can imagine people using Jest for unit testing methods whilst Cypress Components, as the name suggests, for components in frameworks like Vue or React.
It’s called “colocating” and it’s a common pattern in the JavaScript world.
Exhibit A:
https://islovely.co/posts/colocating-unit-tests
Exhibit B:
https://twitter.com/dan_abramov/status/762658867327172608?lang=en