ts-overrides-plugin

A plugin for TypeScript that allows overriding tsconfig and ignoring for specific files

Why is it needed?

The plugin partially addresses this issue.

The most popular use case is migrating a project from strict: false to strict: true, but it can also be used for any other cases where you need to override the tsconfig settings for specific files.

What can it do?

• Override diagnostics for files in the IDE
• Override type hints when hovering over variables in the IDE
• Override diagnostics for files in webpack, tsc, and other builders that use ts-patch
• Ignore files from type checking in the IDE and builders

Known issues

• Paths in tsconfig should not start with ./
• The plugin does not work in WebStorm when using yarn pnp and workspaces (see issue and workaround)
• Some issues may be caused by incompatibility of the latest TypeScript version with ts-patch. For example: issue, issue, issue
• Memory leaks are possible with a very large number of files (> 3000)

Installation and setup

Examples can be seen in the example folder. Specially for TS4, a separate example folder. Specially for TS3, a separate example folder.

For using the plugin only in the IDE

Execute in the terminal:

yarn add -D ts-overrides-plugin

In the tsconfig.json file, add:

{
  "compilerOptions": {
    "strict": false, // Default settings
    "plugins": [
      {
        "name": "ts-overrides-plugin",
        "ignores": ["src/ignored/**/*.{ts,tsx}"], // Path to files (glob) that should be ignored from type checking. Should not start with './'
        "overrides": [
            {
              "files": ["src/modern/**/*.{ts,tsx}"], // Path to files (glob) for which settings need to be overridden. Should not start with './'
              "compilerOptions": { // Settings for these files
                "strict": true
              }
            },
            {
              "files": ["src/legacy/**/*.{ts,tsx}"],
              "compilerOptions": { // Settings are inherited only from the default settings
                "strict": true,
                "strictNullChecks": false
              }
            }
        ]
      }
    ]
  }
}

For use in webpack, tsc

For the plugin to work correctly in webpack, tsc, it's necessary to use the ts-patch library.

Execute in the terminal:

yarn add -D ts-overrides-plugin ts-patch # For TS5
yarn add -D ts-overrides-plugin [email protected] # For TS4
yarn add -D ts-overrides-plugin [email protected] # For TS3

In the tsconfig.json file, add:

{
  "compilerOptions": {
    "strict": false, // Default settings
    "plugins": [
      {
        "name": "ts-overrides-plugin",
        "transform": "ts-overrides-plugin",
        "transformProgram": true,
        "ignores": ["src/ignored/**/*.{ts,tsx}"], // Path to files (glob) that should be ignored from type checking. Should not start with './'
        "overrides": [
          {
            "files": ["src/modern/**/*.{ts,tsx}"], // Path to files (glob) for which settings need to be overridden. Should not start with './'
            "compilerOptions": { // Settings for these files
              "strict": true,
            },
          },
          {
            "files": ["src/legacy/**/*.{ts,tsx}"],
            "compilerOptions": { // Settings are inherited only from the default settings
              "strict": true,
              "strictNullChecks": false
            }
          }
        ]
      }
    ]
  }
}

If you are using Persistent Patch with ts-patch (yarn ts-patch install), then there is nothing more to do.

For TypesSript 3 and TypesSript 4 version, it is possible to use only the Persistent Patch option with.

If, however, you are using Live Compiler (Only TypeScript 5, the following steps are necessary):

For the tsc command – replace it with tspc in package.json:

{
  "scripts": {
    "build": "tspc"
  }
}

For ForkTsCheckerWebpackPlugin in the webpack.config.js file, add:

const path = require('path');

module.exports = {
	plugins: [
		new ForkTsCheckerWebpackPlugin({
			typescript: {
				typescriptPath: require.resolve('ts-patch/compiler'),
			}
		}),
	],
};

For ts-loader in the webpack.config.js file, add:

const path = require('path');

module.exports = {
	module: {
		rules: [
			{
				test: /\.ts$/,
				exclude: /node_modules/,
				loader: 'ts-loader',
				options: {
					compiler: require.resolve('ts-patch/compiler'),
				}
			},
		],
	},
};