TypeScript: объявление разных библиотек / ссылок для разных файлов в одном проекте

У меня есть проект, написанный на TypeScript. Я использую как dom, так и Web Workers, поэтому мне нужна библиотека webworker.d.ts в некоторых файлах и dom.d.ts в других файлах.

Я уже пробовал добавить «webworker» в опцию lib в tsconfig.json, но эти два понятия несовместимы.

Еще я попробовал добавить:

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

в верхней части моего служебного файла, но «webworker» применяется к каждому файлу, а не только к тому, который содержит ссылки.

Как я могу иметь в одном проекте оба файла, которым нужны ссылки на dom, и файлы, которым нужны ссылки на webworker?

Вот мой конфиг:

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

typescript webpack

14.01.2019 21:37

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Как заставить Remix работать с Mantine и Cloudflare Pages/Workers

Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

TypeScript против JavaScript

TypeScript vs JavaScript - в чем различия и какой из них выбрать?

Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage

Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...

Что такое ленивая загрузка в Angular и как ее применять

Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...

1 506

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

С vue см. Microsoft / TypeScript / issues / 20595, в котором говорится:

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.

Попробуйте как:

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

ИЛИ: Следуйте рецепту связано 20595, который потребует набора некоторых частей веб-работника или создания файлов типов для компонентов, которые вам нужны / используются.

Использовать:

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

Я последовал вашему совету и набрал только то, что мне нужно: self с использованием import { ServiceWorkerGlobalScope } from "./webworker.ts"; declare const self: ServiceWorkerGlobalScope;. webworker.ts - это файл длиной ~ 250 строк, в который я скопировал только DedicatedWorkerGlobalScope, ServiceWorkerGlobalScope, WorkerGlobalScope и отсутствующие интерфейсы из webworker.d.ts. Затем я получаю доступ, например, clients с использованием self.clients вместо clients.