從Typescript http url導入ES6模塊

Question

我正在編寫一個 ES6 模塊，它依賴於 http url 指定的其他 ES6 模塊，如下所示：

import { el, mount } from "https://cdnjs.cloudflare.com/ajax/libs/redom/3.26.0/redom.es.js";
const pElem = el("p") // definitely works in Javascript

當我試圖在 Typescript 中翻譯我的模塊時，我得到了這個錯誤：

找不到模塊“https://cdnjs.cloudflare.com/ajax/libs/redom/3.26.0/redom.es.js”或其相應的類型聲明。

我正在使用ts-watch npm 模塊編譯 Typescript，它工作正常，除非我不使用來自https://...的import 。

我也知道如果我嘗試導入 npm 模塊（例如import {el} from "redom" ）它也能正常工作。 但我正在寫的是 web 瀏覽器的模塊，而不是 npm 的模塊。因此，使用webpack不是一個選項。

Answer 1

感謝@acrazing 的評論，我設法解決了這個問題。 就是這樣：

在一個新的 ts 文件中：

declare module 'https://*'

這消除了 Typescript 編譯器嘗試讀取類型聲明的錯誤。

如果要將類型聲明作為節點依賴項訪問，請將其粘貼到新的 ts 文件中：

declare module 'https://cdnjs.cloudflare.com/ajax/libs/redom/3.26.0/redom.es.js' {
    export * from 'redom'
}

並在 package.json 中添加redom依賴項

  "dependencies": {
    "redom": "3.26.0",
    ...
  },

然后，從本地./node_modules目錄中讀取類型聲明，VSCode 也可以識別類型。

Answer 2

declare module 'https://*'不知何故對我不起作用，所以我只是忽略它。

// @ts-ignore Import module
import { Foo } from "https://example.com/foo.ts";

// Now you can use Foo (considered any)