javascript - 如何为将方法放在全局命名空间(窗口)上的库编写 Typescript 定义文件？

Question

我正在 Typescript 中构建一个依赖于 P5.js library 的应用程序.

P5.js 在全局命名空间中放置了很多函数，因此只需使用 draw() 和 之类的内容就可以在您的 Web 应用程序中调用它们椭圆(x, y, w, l) 等等...

我在 Webstorm 工作，我希望 Webstorm 能够为我执行静态分析，因此我一直将 P5.js 的函数名称添加到 p5.d.ts 文件中( there is no p5.js Typescript 定义文件已发布)，例如:

declare var setup: () => void;
declare var draw: () => void;
declare var background: (color: number) => void;
declare var stroke: (r: number, g: number, b: number) => void;
...

但这并不理想。

#1:这些函数实际上确实返回一些东西 - 一个 P5 对象 - 它包含所有这些方法，尽管通常不使用它。

#2:我仍然在整个应用程序中调用这些方法，没有任何前缀或任何内容。这使得这些函数的实际来源有点模糊。

还有更多问题......

任何人都可以提供一些关于如何为 P5.js 这样的库创建 .d.ts 的指导吗？

Answer 1

将它们编写为函数更为自然。您还可以声明一个接口(interface)类型来表示通用返回类型(我假设他们将其设置为“链接”API？)

declare function stroke(r: number, g: number, b: number): P5;
declare function background(color: number): P5;

interface P5 {
  stroke(r: number, g: number, b: number): P5;
  background(color: number): P5;
}

不幸的是，在 TypeScript 中没有办法说“同时使这部分成为全局作用域”，因此您必须复制这些定义。

关于#2，嗯，这是 P5 的问题？我想看看 P5 文档是否提供了更智能的方法来调用函数。将一堆东西放在全局范围内不再是 JS 库的常见模式，因此可能还有其他方法可以做到这一点。

更新

显然是的there is another way to use P5.js functions without polluting the global namespace 。