How to prevent TypeScript from interrupting Webpack building on unresolved variables declared on Webpack's ProvidePlugin?

Is there a way to prevent WebPack's building process from failing after typescript compiler start yelling on unresolved variables that actually are already configured on webpack's ProvidePlugin configuration?

webpack.config.js

plugins: [
...
new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "_": "underscore",
            "underscore": "underscore"
            //'process.env.NODE_ENV': '"development"'
        }),

]

tsconfig.json

{
  "compilerOptions": {


    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

https://webpack.github.io/docs/list-of-plugins.html#provideplugin

From my experience, the typescript is not aware of which variables will be injected into the module and as result the build is not completed.

This is the output of the build

ERROR in ./src/file1.component.ts
(77,9): error TS2304: Cannot find name '$'.

ERROR in ./src/file2.component.ts
(78,13): error TS2304: Cannot find name '$'.

ERROR in ./src/file3.ts
(155,15): error TS2304: Cannot find name 'jQuery'.

ERROR in ./src/file4.ts
(108,9): error TS2304: Cannot find name '$'.

If I understand ProvidePlugin correctly you still need to have declared jQuery and underscore as modules (externals or alias).

Therefore I'd recommend to load those modules in TypeScript with:

import * as $ from 'jquery';
import * as _ from 'underscore';

Then you just need to provide definition (.d.ts) files for those libraries. I recommend typings for that purpose.

typings install jquery --global
typings install underscore --global

I assume you are using ts-loader which would handle that automatically.

If you want to avoid import statements you can still declare those libraries with definitions from typings.

Or you can create your own simplified declaration:

declare var jQuery: any;
declare var $: any;