TypeScript:为同一项目中的不同文件声明不同的库/引用 [英] TypeScript: Declare Different Libraries/References for Different Files Within the Same Project

问题描述

我有一个用 TypeScript 编写的项目.我同时使用 dom 和 Web Workers，所以我需要在某些文件中使用 webworker.d.ts 库，在其他文件中使用 dom.d.ts 库.

I have a project that is written in TypeScript. I use both the dom and Web Workers, so I need the webworker.d.ts library in some files and dom.d.ts in other files.

我已经尝试在 tsconfig.json 的 lib 选项中添加webworker"，但这两个不兼容.

I already tried adding "webworker" to the lib option in tsconfig.json, but those two are incompatible.

我尝试的另一件事是添加:

Another thing I tried is adding:

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

在我的 service worker 文件的顶部，但webworker"应用于每个文件，而不仅仅是包含引用的文件.

at the top of my service worker file, but "webworker" is applied to every file instead of just the one that includes the references.

如何在同一个项目中同时拥有需要引用 dom 的文件和需要引用 webworker 的文件?

How can I have both files that need references to dom and files that need references to webworker within the same project?

这是我的配置:

// 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"]
}

推荐答案

用 vue 查看 Microsoft/TypeScript/issues/20595 其中指出:

With vue see Microsoft/TypeScript/issues/20595 which states:

我们发现，在 web worker 的全局范围内有意义的东西比我们在 DOM 中发现的要窄得多.所以我们倾向于使用 "lib": [ "dom" ] 进行创作，然后只声明一些我们需要让 web worker 工作的 API，或者我们获取对全局对象的引用，将其视为任何对象，然后选择全局范围内的某些属性，并在我们选择它们的地方输入它们.

试试:

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

或:遵循 linked 20595 配方，这将需要对某些 ​​webworker 部件进行排版或为您需要/使用的组件制作类型文件.

OR: Follow the linked 20595 recipe which will require typesetting to some webworker parts or making types files for components you need/use.

使用:

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;
}
})();

然后引用，例如:

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

这篇关于TypeScript:为同一项目中的不同文件声明不同的库/引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！