I'm having some issues with properly compiling my typescript when I attempt to use web workers with Webpack.
I have a worker defined like this:
onmessage = (event:MessageEvent) => {
var files:FileList = event.data;
for (var i = 0; i < files.length; i++) {
postMessage(files[i]);
}
};
In another part of my application i'm using the webpack worker loader to load my worker like this: let Worker = require('worker!../../../workers/uploader/main');
I'm however having some issues with making the typescript declarations not yell at me when the application has to be transpiled. According to my research i have to add another standard lib to my tsconfig file to expose the global variables the worker need access to. These i have specified like so:
{
"compilerOptions": {
"lib": [
"webworker",
"es6",
"dom"
]
}
}
Now, when i run webpack to have it build everything i get a bunch of errors like these: C:/Users/hanse/Documents/Frontend/node_modules/typescript/lib/lib.webworker.d.ts:1195:13 Subsequent variable declarations must have the same type. Variable 'navigator' must be of type 'Navigator', but here has type 'WorkerNavigator'.
So my question is: How do I specify so the webworker uses the lib.webworker.d.ts definitions and everything else follows the normal definitions?
In your tsconfig.json
file, in compilerOptions
set this:
{
"compilerOptions": {
"target": "es5",
//this config for target "es5"
"lib": ["webworker", "es5"]
//uncomment this for target "es6"
//"lib": ["webworker", "es6"]
}
}
Web workers can't access to DOM, window
, document
and parent
objects (full list supported objects here: Functions and classes available to Web Workers); the dom
lib of TypeScript is not compatible and redefine some elements that are define in lib.webworker.d.ts