webpack - TypeScript: Deklarer forskjellige biblioteker/referanser for forskjellige filer innenfor samme prosjekt

Jeg har et prosjekt som er skrevet i TypeScript. Jeg bruker både DOM og Web Workers, så jeg trenger webworker.d.ts-biblioteket i noen filer og dom.d.ts i andre filer.

Jeg har allerede prøvd å legge til "webworker" i lib-alternativet i tsconfig.json, men de to er inkompatible.

En annen ting jeg prøvde er å legge til:

/// <reference no-default-lib="true"/>
/// <reference lib="esnext" />
/// <reference lib="webworker" />

på toppen av servicearbeider-filen min, men "webworker" brukes på hver fil i stedet for bare den som inkluderer referansene.

Hvordan kan jeg ha både filer som trenger referanser til DOM og filer som trenger referanser til webworker i samme prosjekt?

Her er min konfigurasjon:

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "noEmitHelpers": false,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

Svar #1

Med vue se Microsoft/TypeScript/issues/20595 som sier:

We have found that what is meaningful in the global scope of a web worker is significantly more narrow than we find out of the DOM. So we tend to author with "lib": [ "dom" ] and then just declare the handful of APIs we require to make a web worker work, or we obtain a reference to the global object, treat it as any, and pick off certain properties from the global scope and type them at the point where we pick them off.

Prøv som:

const ctx: Worker = self as any;
ctx.postMessage();

ELLER: Følg den lenkede 20595-oppskriften som vil kreve satt opp typografi for noen webarbeiderdeler eller lage typefiler for komponentene du trenger/bruke.

Bruk :

const globalObject: any = (function (): any {
if (typeof global !== 'undefined') {
    // global spec defines a reference to the global object called 'global'
    // https://github.com/tc39/proposal-global
    // `global` is also defined in NodeJS
    return global;
}
else if (typeof window !== 'undefined') {
    // window is defined in browsers
    return window;
}
else if (typeof self !== 'undefined') {
    // self is defined in WebWorkers
    return self;
}
})();

Referer da for eksempel ved:

import globalObject from 'globalObject'
globalObject.postMessage({});

Relaterte artikler