Type conflicts on transpilation when including libs DOM, ESNext, DOM.Iterable, WebWorker

[ispivey]

tl;dr: either I'm holding it wrong, or the README instructions to include ["DOM", "DOM.Iterable", "WebWorker"] // As well as "ESNext", etc. as your project requires are wrong. I'm not sure what the answer is, but will poke around a bit.

I was working on a project with a tsconfig like this:

...
    "target": "esnext",
    "module": "esnext",
    "lib": ["ESNext", "WebWorker"]
...

However, I ran in to an error trying to transpile code which accesses the entries() method of a FormData type.

templates/typescript/post_data.ts:48:32 - error TS2339: Property 'entries' does not exist on type 'FormData'.

48     for (let entry of formData.entries()) {
                                  ~~~~~~~

So I read the types and the README, and realized the iterator properties come from DOM.Iterable, so I added that and the DOM lib.

...
    "target": "esnext",
    "module": "esnext",
    "lib": ["DOM", "ESNext", "DOM.Iterable", "WebWorker"]
...

Now, transpilation bonks real hard on conflicts:

> tsc --project ./templates/typescript

node_modules/typescript/lib/lib.dom.d.ts(25,1): error TS6200: Definitions of the following identifiers conflict with those in another file: EventListenerOrEventListenerObject, ImportExportKind, TableKind, ValueType, ExportValue, Exports, ImportValue, ModuleImports, Imports, HeadersInit, BodyInit, RequestInfo, BlobPart, DOMHighResTimeStamp, CanvasImageSource, OffscreenRenderingContext, MessageEventSource, ImageBitmapSource, TimerHandler, PerformanceEntryList, ReadableStreamReadResult, VibratePattern, AlgorithmIdentifier, HashAlgorithmIdentifier, BigInteger, NamedCurve, GLenum, GLboolean, GLbitfield, GLint, GLsizei, GLintptr, GLsizeiptr, GLuint, GLfloat, GLclampf, TexImageSource, Float32List, Int32List, GLint64, GLuint64, Uint32List, BufferSource, DOMTimeStamp, FormDataEntryValue, IDBValidKey, Transferable, BinaryType, CanvasDirection, CanvasFillRule, CanvasLineCap, CanvasLineJoin, CanvasTextAlign, CanvasTextBaseline, ClientTypes, EndingType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, ImageSmoothingQuality, KeyFormat, KeyType, KeyUsage, NotificationDirection, NotificationPermission, OffscreenRenderingContextId, PermissionName, PermissionState, PushEncryptionKeyName, PushPermissionState, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestRedirect, ResponseType, ServiceWorkerState, ServiceWorkerUpdateViaCache, VisibilityState, WebGLPowerPreference, WorkerType, XMLHttpRequestResponseType
node_modules/typescript/lib/lib.dom.d.ts(3719,11): error TS2430: Interface 'Comment' incorrectly extends interface 'CharacterData'.
  Types of property 'after' are incompatible.
    Type '(content: string, options?: ContentOptions) => Element' is not assignable to type '(...nodes: (string | Node)[]) => void'.
      Types of parameters 'options' and 'nodes' are incompatible.
        Type 'string | Node' is not assignable to type 'ContentOptions'.
          Type 'string' is not assignable to type 'ContentOptions'.
node_modules/typescript/lib/lib.dom.d.ts(3874,5): error TS2687: All declarations of 'privateKey' must have identical modifiers.
node_modules/typescript/lib/lib.dom.d.ts(3875,5): error TS2687: All declarations of 'publicKey' must have identical modifiers.
node_modules/typescript/lib/lib.dom.d.ts(4961,101): error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
  Type 'HTMLElement | HTMLCanvasElement | HTMLImageElement | HTMLVideoElement | HTMLAnchorElement | ... 66 more ... | HTMLUListElement' is not assignable to type 'Element'.
    Type 'HTMLSelectElement' is not assignable to type 'Element'.
      The types returned by 'remove()' are incompatible between these types.
        Type 'void' is not assignable to type 'Element'.
node_modules/typescript/lib/lib.dom.d.ts(5251,11): error TS2430: Interface 'Element' incorrectly extends interface 'ChildNode'.
  Types of property 'after' are incompatible.
    Type '(content: string, options?: ContentOptions) => Element' is not assignable to type '(...nodes: (string | Node)[]) => void'.
      Types of parameters 'options' and 'nodes' are incompatible.
        Type 'string | Node' is not assignable to type 'ContentOptions'.
          Type 'string' is not assignable to type 'ContentOptions'.
node_modules/typescript/lib/lib.dom.d.ts(5251,11): error TS2430: Interface 'Element' incorrectly extends interface 'ParentNode'.
  Types of property 'append' are incompatible.
    Type '(content: string, options?: ContentOptions) => Element' is not assignable to type '(...nodes: (string | Node)[]) => void'.
      Types of parameters 'options' and 'nodes' are incompatible.
        Type 'string | Node' is not assignable to type 'ContentOptions'.
          Type 'string' is not assignable to type 'ContentOptions'.
node_modules/typescript/lib/lib.dom.d.ts(5277,14): error TS2687: All declarations of 'namespaceURI' must have identical modifiers.
node_modules/typescript/lib/lib.dom.d.ts(5300,14): error TS2687: All declarations of 'tagName' must have identical modifiers.
node_modules/typescript/lib/lib.dom.d.ts(5331,101): error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
  Type 'HTMLElement | HTMLCanvasElement | HTMLImageElement | HTMLVideoElement | HTMLAnchorElement | ... 66 more ... | HTMLUListElement' is not assignable to type 'Element'.
    Type 'HTMLSelectElement' is not assignable to type 'Element'.
node_modules/typescript/lib/lib.dom.d.ts(8414,11): error TS2430: Interface 'HTMLSelectElement' incorrectly extends interface 'HTMLElement'.
  Types of property 'remove' are incompatible.
    Type '{ (): void; (index: number): void; }' is not assignable to type '() => Element'.
node_modules/typescript/lib/lib.dom.d.ts(15663,11): error TS2430: Interface 'Text' incorrectly extends interface 'CharacterData'.
  Types of property 'after' are incompatible.
    Type '(content: string, options?: ContentOptions) => Element' is not assignable to type '(...nodes: (string | Node)[]) => void'.
      Types of parameters 'options' and 'nodes' are incompatible.
        Type 'string | Node' is not assignable to type 'ContentOptions'.
          Type 'string' is not assignable to type 'ContentOptions'.
node_modules/typescript/lib/lib.webworker.d.ts(25,1): error TS6200: Definitions of the following identifiers conflict with those in another file: EventListenerOrEventListenerObject, ImportExportKind, TableKind, ValueType, ExportValue, Exports, ImportValue, ModuleImports, Imports, HeadersInit, BodyInit, RequestInfo, BlobPart, DOMHighResTimeStamp, CanvasImageSource, OffscreenRenderingContext, MessageEventSource, ImageBitmapSource, TimerHandler, PerformanceEntryList, ReadableStreamReadResult, VibratePattern, AlgorithmIdentifier, HashAlgorithmIdentifier, BigInteger, NamedCurve, GLenum, GLboolean, GLbitfield, GLint, GLsizei, GLintptr, GLsizeiptr, GLuint, GLfloat, GLclampf, TexImageSource, Float32List, Int32List, GLint64, GLuint64, Uint32List, BufferSource, DOMTimeStamp, FormDataEntryValue, IDBValidKey, Transferable, BinaryType, CanvasDirection, CanvasFillRule, CanvasLineCap, CanvasLineJoin, CanvasTextAlign, CanvasTextBaseline, ClientTypes, EndingType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, ImageSmoothingQuality, KeyFormat, KeyType, KeyUsage, NotificationDirection, NotificationPermission, OffscreenRenderingContextId, PermissionName, PermissionState, PushEncryptionKeyName, PushPermissionState, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestRedirect, ResponseType, ServiceWorkerState, ServiceWorkerUpdateViaCache, VisibilityState, WebGLPowerPreference, WorkerType, XMLHttpRequestResponseType
node_modules/typescript/lib/lib.webworker.d.ts(89,5): error TS2687: All declarations of 'privateKey' must have identical modifiers.
node_modules/typescript/lib/lib.webworker.d.ts(90,5): error TS2687: All declarations of 'publicKey' must have identical modifiers.
node_modules/typescript/lib/lib.webworker.d.ts(1180,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'DOMMatrixReadOnly' must be of type '{ new (init?: string | number[]): DOMMatrixReadOnly; prototype: DOMMatrixReadOnly; fromFloat32Array(array32: Float32Array): DOMMatrixReadOnly; fromFloat64Array(array64: Float64Array): DOMMatrixReadOnly; fromMatrix(other?: DOMMatrixInit): DOMMatrixReadOnly; toString(): string; }', but here has type '{ new (init?: string | number[]): DOMMatrixReadOnly; prototype: DOMMatrixReadOnly; fromFloat32Array(array32: Float32Array): DOMMatrixReadOnly; fromFloat64Array(array64: Float64Array): DOMMatrixReadOnly; fromMatrix(other?: DOMMatrixInit): DOMMatrixReadOnly; }'.
node_modules/typescript/lib/lib.webworker.d.ts(1277,5): error TS2375: Duplicate number index signature.
node_modules/typescript/lib/lib.webworker.d.ts(1574,5): error TS2375: Duplicate number index signature.
node_modules/typescript/lib/lib.webworker.d.ts(1648,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'FormData' must be of type '{ new (form?: HTMLFormElement): FormData; prototype: FormData; }', but here has type '{ new (): FormData; prototype: FormData; }'.
node_modules/typescript/lib/lib.webworker.d.ts(2214,14): error TS2717: Subsequent property declarations must have the same type.  Property 'canvas' must be of type 'HTMLCanvasElement | OffscreenCanvas', but here has type 'OffscreenCanvas'.
node_modules/typescript/lib/lib.webworker.d.ts(2401,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'Notification' must be of type '{ new (title: string, options?: NotificationOptions): Notification; prototype: Notification; readonly maxActions: number; readonly permission: NotificationPermission; requestPermission(deprecatedCallback?: NotificationPermissionCallback): Promise<...>; }', but here has type '{ new (title: string, options?: NotificationOptions): Notification; prototype: Notification; readonly maxActions: number; readonly permission: NotificationPermission; }'.
node_modules/typescript/lib/lib.webworker.d.ts(4758,14): error TS2717: Subsequent property declarations must have the same type.  Property 'canvas' must be of type 'HTMLCanvasElement | OffscreenCanvas', but here has type 'OffscreenCanvas'.
node_modules/typescript/lib/lib.webworker.d.ts(5432,11): error TS2320: Interface 'WorkerGlobalScope' cannot simultaneously extend types 'WindowOrWorkerGlobalScope' and 'WorkerUtils'.
  Named property 'atob' of types 'WindowOrWorkerGlobalScope' and 'WorkerUtils' are not identical.
node_modules/typescript/lib/lib.webworker.d.ts(5432,11): error TS2320: Interface 'WorkerGlobalScope' cannot simultaneously extend types 'WindowOrWorkerGlobalScope' and 'WorkerUtils'.
  Named property 'btoa' of types 'WindowOrWorkerGlobalScope' and 'WorkerUtils' are not identical.
node_modules/typescript/lib/lib.webworker.d.ts(5826,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'onmessage' must be of type '(this: Window, ev: MessageEvent) => any', but here has type '(this: DedicatedWorkerGlobalScope, ev: MessageEvent) => any'.
node_modules/typescript/lib/lib.webworker.d.ts(5836,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'location' must be of type 'Location', but here has type 'WorkerLocation'.
node_modules/typescript/lib/lib.webworker.d.ts(5837,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'onerror' must be of type 'OnErrorEventHandlerNonNull', but here has type '(this: DedicatedWorkerGlobalScope, ev: ErrorEvent) => any'.
node_modules/typescript/lib/lib.webworker.d.ts(5839,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'.
node_modules/typescript/lib/lib.webworker.d.ts(5847,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'navigator' must be of type 'Navigator', but here has type 'WorkerNavigator'.
templates/typescript/cache_ttl.ts(10,7): error TS2769: No overload matches this call.
  Overload 1 of 2, '(input: RequestInfo, init?: RequestInit): Promise<Response>', gave the following error.
    Type '{ cacheTtl: number; cacheEverything: boolean; cacheKey: string; }' is not assignable to type 'CfRequestProperties | CfRequestInit'.
      Object literal may only specify known properties, and 'cacheTtl' does not exist in type 'CfRequestProperties | CfRequestInit'.
  Overload 2 of 2, '(input: RequestInfo, init?: RequestInit): Promise<Response>', gave the following error.
    Type '{ cacheTtl: number; cacheEverything: boolean; cacheKey: string; }' is not assignable to type 'CfRequestProperties | CfRequestInit'.
      Object literal may only specify known properties, and 'cacheTtl' does not exist in type 'CfRequestProperties | CfRequestInit'.
templates/typescript/conditional_response.ts(29,7): error TS2367: This condition will always return 'false' since the types 'string' and 'number' have no overlap.
../workers-types/index.d.ts(183,3): error TS2687: All declarations of 'namespaceURI' must have identical modifiers.
../workers-types/index.d.ts(187,3): error TS2687: All declarations of 'tagName' must have identical modifiers.
../workers-types/index.d.ts(191,12): error TS2717: Subsequent property declarations must have the same type.  Property 'attributes' must be of type 'NamedNodeMap', but here has type 'Iterator<{ name: string; value: string; }, any, undefined>'.

I realize a few of those errors are because I have a mis-shapen cf object, as I've been playing around with type definitions locally. But the others seem real.

[ispivey]

Also, to be clear, very strong possibility I'm holding it wrong.

[ispivey]

Ooh, looks like the TypeScript folks ack that DOM.Iterable and WebWorker don't play well together, and plan to create a separate WebWorker.Iterable: microsoft/TypeScript#32435 (comment)

@jrf0110 did including all these libraries work for you at some point? realized you didn't add that to the README.

For now, we could pull the iterable interface additions we need into our types, like

interface FormData {
    [Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]>;
    /**
     * Returns an array of key, value pairs for every entry in the list.
     */
    entries(): IterableIterator<[string, FormDataEntryValue]>;
    /**
     * Returns a list of keys in the list.
     */
    keys(): IterableIterator<string>;
    /**
     * Returns a list of values in the list.
     */
    values(): IterableIterator<FormDataEntryValue>;
}

[ispivey]

@1000hz d'you have any thoughts on my proposed solution of just pulling iterable interface definitions into our types from https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.iterable.d.ts , until TypeScript supports a separate WebWorker.Iterable?

[ispivey]

Finally, I did try ["DOM.Iterable", "ESNext", "WebWorker"], which also doesn't work, because DOM.Iterable references some types defined only in DOM: https://gist.github.com/ispivey/03f36d24f95a5721812963bd16c86927