I'm trying to create a Typescript project that supports web workers.
First I create a baseline that will compile typescript code like this.
mkdir ts
cd ts
npm init -y
npm i -D typescript
npm i -D @types/mocha
Add tsconfig.json.
{
"compilerOptions": {
"target": "es2021",
"module": "es2020",
"lib": ["es2021", "DOM", "DOM.Iterable"],
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"inlineSources": true,
"outDir": "./build",
"rootDir": "./src",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitThis": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"noImplicitOverride": true,
"types": ["mocha"]
},
"include": ["src/**/*.ts"],
"exclude": []
}
Add some typescript (src/hello.component.ts).
/**
* @category WebComponent
*
* Hello World Web Component
* that renders a greeting.
*/
export class HelloWorldComponent extends HTMLElement {
static get observedAttributes() {
return ['name'];
}
/**
* The name to greet
* @defaultValue World
*/
name: string | null = 'World';
something!: string;
/**
* Initializes the name property to `World`.
*/
constructor() {
super();
// this.name = 'World';
}
/**
* Sets the component inner
* html to the greeting.
*/
connectedCallback() {
this.textContent = `Hello ${this.name}!`;
}
//========================================
// attribute change callback
//========================================
attributeChangedCallback(
property: keyof HelloWorldComponent,
oldValue: string | null,
newValue: string | null
) {
if (oldValue === newValue) return;
switch (property) {
case 'name':
this.name = newValue;
break;
default:
throw new Error(`Unhandled attribute: ${property}`);
}
}
}
customElements.define('hello-world', HelloWorldComponent);
And run tsc.
This compiles fine.
And the only step left to add web worker support is to add it to the lib compiler option like this.
"lib": ["es2021", "DOM", "DOM.Iterable", "WebWorker"],
And rerun tsc. However now it generates creates all these errors. Any ideas?
tsc
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:23:1 - error TS6200: Definitions of the following identifiers conflict with those in another file: ImportExportKind, TableKind, ExportValue, Exports, ImportValue, Imports, ModuleImports, ValueType, name, AlgorithmIdentifier, AllowSharedBufferSource, BigInteger, BinaryData, BlobPart, BodyInit, BufferSource, CSSKeywordish, CSSNumberish, CSSPerspectiveValue, CSSUnparsedSegment, CanvasImageSource, DOMHighResTimeStamp, EpochTimeStamp, EventListenerOrEventListenerObject, FileSystemWriteChunkType, Float32List, FormDataEntryValue, GLbitfield, GLboolean, GLclampf, GLenum, GLfloat, GLint, GLint64, GLintptr, GLsizei, GLsizeiptr, GLuint, GLuint64, HashAlgorithmIdentifier, HeadersInit, IDBValidKey, ImageBitmapSource, Int32List, MessageEventSource, NamedCurve, OffscreenRenderingContext, OnErrorEventHandler, PerformanceEntryList, ReadableStreamController, ReadableStreamReadResult, ReadableStreamReader, ReportList, RequestInfo, TexImageSource, TimerHandler, Transferable, Uint32List, XMLHttpRequestBodyInit, AlphaOption, AvcBitstreamFormat, BinaryType, CSSMathOperator, CSSNumericBaseType, CanvasDirection, CanvasFillRule, CanvasFontKerning, CanvasFontStretch, CanvasFontVariantCaps, CanvasLineCap, CanvasLineJoin, CanvasTextAlign, CanvasTextBaseline, CanvasTextRendering, ClientTypes, CodecState, ColorGamut, ColorSpaceConversion, CompressionFormat, DocumentVisibilityState, EncodedVideoChunkType, EndingType, FileSystemHandleKind, FontDisplay, FontFaceLoadStatus, FontFaceSetLoadStatus, GlobalCompositeOperation, HardwareAcceleration, HdrMetadataType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionDurability, IDBTransactionMode, ImageOrientation, ImageSmoothingQuality, KeyFormat, KeyType, KeyUsage, LatencyMode, LockMode, MediaDecodingType, MediaEncodingType, NotificationDirection, NotificationPermission, OffscreenRenderingContextId, PermissionName, PermissionState, PredefinedColorSpace, PremultiplyAlpha, PushEncryptionKeyName, RTCEncodedVideoFrameType, ReadableStreamReaderMode, ReadableStreamType, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestPriority, RequestRedirect, ResizeQuality, ResponseType, SecurityPolicyViolationEventDisposition, ServiceWorkerState, ServiceWorkerUpdateViaCache, TransferFunction, VideoColorPrimaries, VideoEncoderBitrateMode, VideoMatrixCoefficients, VideoPixelFormat, VideoTransferCharacteristics, WebGLPowerPreference, WebTransportCongestionControl, WebTransportErrorSource, WorkerType, WriteCommandType, XMLHttpRequestResponseType
23 interface AddEventListenerOptions extends EventListenerOptions {
~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:23:1
23 interface AddEventListenerOptions extends EventListenerOptions {
~~~~~~~~~
Conflicts are in this file.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:3632:5 - error TS2374: Duplicate index signature for type 'number'.
3632 [index: number]: CSSNumericValue;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:5234:5 - error TS2374: Duplicate index signature for type 'number'.
5234 [index: number]: CSSTransformComponent;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:5290:5 - error TS2374: Duplicate index signature for type 'number'.
5290 [index: number]: CSSUnparsedSegment;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:6471:5 - error TS2374: Duplicate index signature for type 'number'.
6471 [index: number]: string;
~~~~~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:8412:5 - error TS2374: Duplicate index signature for type 'number'.
8412 [index: number]: File;
~~~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:23:1 - error TS6200: Definitions of the following identifiers conflict with those in another file: ImportExportKind, TableKind, ExportValue, Exports, ImportValue, Imports, ModuleImports, ValueType, name, AlgorithmIdentifier, AllowSharedBufferSource, BigInteger, BinaryData, BlobPart, BodyInit, BufferSource, CSSKeywordish, CSSNumberish, CSSPerspectiveValue, CSSUnparsedSegment, CanvasImageSource, DOMHighResTimeStamp, EpochTimeStamp, EventListenerOrEventListenerObject, FileSystemWriteChunkType, Float32List, FormDataEntryValue, GLbitfield, GLboolean, GLclampf, GLenum, GLfloat, GLint, GLint64, GLintptr, GLsizei, GLsizeiptr, GLuint, GLuint64, HashAlgorithmIdentifier, HeadersInit, IDBValidKey, ImageBitmapSource, Int32List, MessageEventSource, NamedCurve, OffscreenRenderingContext, OnErrorEventHandler, PerformanceEntryList, ReadableStreamController, ReadableStreamReadResult, ReadableStreamReader, ReportList, RequestInfo, TexImageSource, TimerHandler, Transferable, Uint32List, XMLHttpRequestBodyInit, AlphaOption, AvcBitstreamFormat, BinaryType, CSSMathOperator, CSSNumericBaseType, CanvasDirection, CanvasFillRule, CanvasFontKerning, CanvasFontStretch, CanvasFontVariantCaps, CanvasLineCap, CanvasLineJoin, CanvasTextAlign, CanvasTextBaseline, CanvasTextRendering, ClientTypes, CodecState, ColorGamut, ColorSpaceConversion, CompressionFormat, DocumentVisibilityState, EncodedVideoChunkType, EndingType, FileSystemHandleKind, FontDisplay, FontFaceLoadStatus, FontFaceSetLoadStatus, GlobalCompositeOperation, HardwareAcceleration, HdrMetadataType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionDurability, IDBTransactionMode, ImageOrientation, ImageSmoothingQuality, KeyFormat, KeyType, KeyUsage, LatencyMode, LockMode, MediaDecodingType, MediaEncodingType, NotificationDirection, NotificationPermission, OffscreenRenderingContextId, PermissionName, PermissionState, PredefinedColorSpace, PremultiplyAlpha, PushEncryptionKeyName, RTCEncodedVideoFrameType, ReadableStreamReaderMode, ReadableStreamType, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestPriority, RequestRedirect, ResizeQuality, ResponseType, SecurityPolicyViolationEventDisposition, ServiceWorkerState, ServiceWorkerUpdateViaCache, TransferFunction, VideoColorPrimaries, VideoEncoderBitrateMode, VideoMatrixCoefficients, VideoPixelFormat, VideoTransferCharacteristics, WebGLPowerPreference, WebTransportCongestionControl, WebTransportErrorSource, WorkerType, WriteCommandType, XMLHttpRequestResponseType
23 interface AddEventListenerOptions extends EventListenerOptions {
~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:23:1
23 interface AddEventListenerOptions extends EventListenerOptions {
~~~~~~~~~
Conflicts are in this file.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:1234:5 - error TS2374: Duplicate index signature for type 'number'.
1234 [index: number]: CSSNumericValue;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:1266:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'CSSNumericValue' must be of type '{ new (): CSSNumericValue; prototype: CSSNumericValue; parse(cssText: string): CSSNumericValue; }', but here has type '{ new (): CSSNumericValue; prototype: CSSNumericValue; }'.
1266 declare var CSSNumericValue: {
~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:3664:13
3664 declare var CSSNumericValue: {
~~~~~~~~~~~~~~~
'CSSNumericValue' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:1355:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'CSSStyleValue' must be of type '{ new (): CSSStyleValue; prototype: CSSStyleValue; parse(property: string, cssText: string): CSSStyleValue; parseAll(property: string, cssText: string): CSSStyleValue[]; }', but here has type '{ new (): CSSStyleValue; prototype: CSSStyleValue; }'.
1355 declare var CSSStyleValue: {
~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:5189:13
5189 declare var CSSStyleValue: {
~~~~~~~~~~~~~
'CSSStyleValue' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:1383:5 - error TS2374: Duplicate index signature for type 'number'.
1383 [index: number]: CSSTransformComponent;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:1424:5 - error TS2374: Duplicate index signature for type 'number'.
1424 [index: number]: CSSUnparsedSegment;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:2247:5 - error TS2374: Duplicate index signature for type 'number'.
2247 [index: number]: string;
~~~~~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:2763:5 - error TS2374: Duplicate index signature for type 'number'.
2763 [index: number]: File;
~~~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:3075:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'FormData' must be of type '{ new (form?: HTMLFormElement | undefined, submitter?: HTMLElement | null | undefined): FormData; prototype: FormData; }', but here has type '{ new (): FormData; prototype: FormData; }'.
3075 declare var FormData: {
~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:8758:13
8758 declare var FormData: {
~~~~~~~~
'FormData' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:4185:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'Notification' must be of type '{ new (title: string, options?: NotificationOptions | undefined): Notification; prototype: Notification; readonly permission: NotificationPermission; requestPermission(deprecatedCallback?: NotificationPermissionCallback | undefined): Promise<...>; }', but here has type '{ new (title: string, options?: NotificationOptions | undefined): Notification; prototype: Notification; readonly permission: NotificationPermission; }'.
4185 declare var Notification: {
~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:16699:13
16699 declare var Notification: {
~~~~~~~~~~~~
'Notification' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:5693:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'URL' must be of type '{ new (url: string | URL, base?: string | URL | undefined): URL; prototype: URL; canParse(url: string | URL, base?: string | undefined): boolean; createObjectURL(obj: Blob | MediaSource): string; revokeObjectURL(url: string): void; }', but here has type '{ new (url: string | URL, base?: string | URL | undefined): URL; prototype: URL; canParse(url: string | URL, base?: string | undefined): boolean; createObjectURL(obj: Blob): string; revokeObjectURL(url: string): void; }'.
5693 declare var URL: {
~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:22904:13
22904 declare var URL: {
~~~
'URL' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9187:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'onmessage' must be of type '((this: Window, ev: MessageEvent<any>) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: MessageEvent<any>) => any) | null'.
9187 declare var onmessage: ((this: DedicatedWorkerGlobalScope, ev: MessageEvent) => any) | null;
~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:28270:13
28270 declare var onmessage: ((this: Window, ev: MessageEvent) => any) | null;
~~~~~~~~~
'onmessage' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9189:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'onmessageerror' must be of type '((this: Window, ev: MessageEvent<any>) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: MessageEvent<any>) => any) | null'.
9189 declare var onmessageerror: ((this: DedicatedWorkerGlobalScope, ev: MessageEvent) => any) | null;
~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:28272:13
28272 declare var onmessageerror: ((this: Window, ev: MessageEvent) => any) | null;
~~~~~~~~~~~~~~
'onmessageerror' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9216:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'location' must be of type 'Location', but here has type 'WorkerLocation'.
9216 declare var location: WorkerLocation;
~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:27594:13
27594 declare var location: Location;
~~~~~~~~
'location' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9222:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'navigator' must be of type 'Navigator', but here has type 'WorkerNavigator'.
9222 declare var navigator: WorkerNavigator;
~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:27611:13
27611 declare var navigator: Navigator;
~~~~~~~~~
'navigator' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9224:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'onerror' must be of type 'OnErrorEventHandler', but here has type '((this: DedicatedWorkerGlobalScope, ev: ErrorEvent) => any) | null'.
9224 declare var onerror: ((this: DedicatedWorkerGlobalScope, ev: ErrorEvent) => any) | null;
~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:27967:13
27967 declare var onerror: OnErrorEventHandler;
~~~~~~~
'onerror' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9226:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'onlanguagechange' must be of type '((this: Window, ev: Event) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null'.
9226 declare var onlanguagechange: ((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null;
~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:28268:13
28268 declare var onlanguagechange: ((this: Window, ev: Event) => any) | null;
~~~~~~~~~~~~~~~~
'onlanguagechange' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9228:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'onoffline' must be of type '((this: Window, ev: Event) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null'.
9228 declare var onoffline: ((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null;
~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:28274:13
28274 declare var onoffline: ((this: Window, ev: Event) => any) | null;
~~~~~~~~~
'onoffline' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9230:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'ononline' must be of type '((this: Window, ev: Event) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null'.
9230 declare var ononline: ((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null;
~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:28276:13
28276 declare var ononline: ((this: Window, ev: Event) => any) | null;
~~~~~~~~
'ononline' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9231:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'onrejectionhandled' must be of type '((this: Window, ev: PromiseRejectionEvent) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: PromiseRejectionEvent) => any) | null'.
9231 declare var onrejectionhandled: ((this: DedicatedWorkerGlobalScope, ev: PromiseRejectionEvent) => any) | null;
~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:28284:13
28284 declare var onrejectionhandled: ((this: Window, ev: PromiseRejectionEvent) => any) | null;
~~~~~~~~~~~~~~~~~~
'onrejectionhandled' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9232:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'onunhandledrejection' must be of type '((this: Window, ev: PromiseRejectionEvent) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: PromiseRejectionEvent) => any) | null'.
9232 declare var onunhandledrejection: ((this: DedicatedWorkerGlobalScope, ev: PromiseRejectionEvent) => any) | null;
~~~~~~~~~~~~~~~~~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:28288:13
28288 declare var onunhandledrejection: ((this: Window, ev: PromiseRejectionEvent) => any) | null;
~~~~~~~~~~~~~~~~~~~~
'onunhandledrejection' was also declared here.
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:9238:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'self' must be of type 'Window & typeof globalThis', but here has type 'WorkerGlobalScope & typeof globalThis'.
9238 declare var self: WorkerGlobalScope & typeof globalThis;
~~~~
../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:27695:13
27695 declare var self: Window & typeof globalThis;
~~~~
'self' was also declared here.
Found 28 errors in 2 files.
Errors Files
6 ../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.dom.d.ts:23
22 ../../.nvm/versions/node/v20.15.0/lib/node_modules/typescript/lib/lib.webworker.d.ts:23
OK - As indicated by MartinJohns on this Github Issue we can't use DOM and WebWorker at the same time.
Shortening lib to this fixes it.
"lib": ["es2021","WebWorker"],