在TypeScript中从HTTP URL导入ES6模块

Question

我正在编写一个ES6模块，其依赖于像这样指定的其他ES6模块的http网址：

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”或其对应的类型声明。

我正在使用npm模块ts-watch编译TypeScript，如果不使用从https://...导入的import语句，它可以正常工作。

我也知道，如果我尝试导入npm模块（例如：import {el} from "redom"），它也可以正常工作。但是我正在编写一个Web浏览器模块，而不是npm模块。因此，使用webpack不是一个选项。

- pocorall

---

这个回答解决了你的问题吗？从Uri导入TypeScript模块 - acrazing

这与我的情况相似。但我想在我的代码中使用ES6导入，这目前会导致Typescript编译错误。有没有办法消除这个错误？ - pocorall

如果您只是想静音 TypeScript 错误，可以尝试这个：https://www.typescriptlang.org/play?#code/CYUwxgNghgTiAEBbA9sArhBByAFgFzwAcBnALgHpyAqLAKFtElgRXU3i0K3gG9b4B8AJaJCyGHnjAoeKPABmMZIg74iZSgHMheHGgBGAOjDK6g+CAAeYibyky5AX1rOgA - acrazing

这就是我想做的！谢谢你！ - pocorall

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也会识别这些类型。

- pocorall

---

直到我把它放在“src”文件夹中与我的其他文件一起，而不是放在单独的顶层“types”文件夹中，才能使它发挥作用。说实话，我还不确定为什么这很重要，可能是因为某些深奥的tsc解析问题。所以，对于我来说，路径应该是 <PROJECT>/src/types/redom.d.ts，而不是 <PROJECT>/types/redom.d.ts。 - Joseph Sikorski

糟糕，看起来我的问题实际上是忘记设置TS编译器选项"moduleResolution": "node"。 - Joseph Sikorski

Answer 2

declare module 'https://*' 对我来说不起作用，所以我忽略它了。

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

// Now you can use Foo (considered any)

- Luke Vo