How to avoid conflict between “dom” and “webworker

Question

I am using TypeScript with React, and one of the things I want to achieve is background sync for offline support.

To enable typings for service worker, I have to include lib "webworker," but it conflicts with lib "dom." and produce such error:

(25,1): Definitions of the following identifiers conflict with those in another file: 
EventListenerOrEventListenerObject, BlobPart, HeadersInit, BodyInit,
RequestInfo, DOMHighResTimeStamp, PerformanceEntryList, PushMessageDataInit,
VibratePattern, BufferSource, DOMTimeStamp, FormDataEntryValue, 
IDBValidKey, MessageEventSource, BinaryType, ClientTypes, 
IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, 
NotificationDirection, NotificationPermission, PushEncryptionKeyName, 
PushPermissionState, ReferrerPolicy, RequestCache, RequestCredentials, 
RequestDestination, RequestMode, RequestRedirect, ResponseType, 
ServiceWorkerState, ServiceWorkerUpdateViaCache, VisibilityState, 
WorkerType, XMLHttpRequestResponseType

So I am wondering if there is any workaround except for typing most of my arguments any

Thanks :-)

Answer 1

You can split your project into multiple parts with separate tsconfig.json files: one part that includes the dom lib and one part that includes the webworker lib. You can make another part for common code that doesn't depend on either library. You can use project references to help automate the build. If this doesn't fully solve the problem, please update the question to describe the outstanding issues.