如何扩展p5.js的TypeScript类型定义？

问题出在你自定义的.d.ts文件里重复导出了p5模块，直接覆盖了原有的构造函数类型定义。TypeScript扩展已有模块的类型时，不需要重新导出模块本身，只需要在模块声明块里扩展对应的接口即可。

正确的自定义类型文件写法如下：

declare module 'p5' {
  interface p5 {
    canvas: HTMLCanvasElement;
  }
}

TypeScript支持接口的声明合并，在同一个declare module 'p5'块里扩展p5接口，会自动和原模块中的接口定义合并——既补充了canvas属性的类型，又不会破坏原有的构造函数等其他类型定义。

修改后再测试你的代码：

import p5 from 'p5'

const sketch = new p5(_ => console.log(sketch.canvas))

此时sketch.canvas会被正确识别为HTMLCanvasElement，同时p5的构造函数也能正常使用，不会再出现构造函数无签名的错误。

额外提示：如果p5实例的canvas属性可能存在未初始化的情况，可以把类型定义改为canvas: HTMLCanvasElement | undefined，让类型更严谨。

内容的提问来源于stack exchange，提问作者Donald Zhu