Typescript picoapp component函数类型不匹配报错如何修正？

问题原因 #

你当前对component函数的类型声明定义了入参为可选的HTMLElement类型，但你实际调用时传入的是一个接收HTMLElement、无返回值的回调函数，二者类型不匹配，所以触发了TS类型报错。

修正方案 #

基础版（仅适配你当前的调用方式） #

如果你使用component时只会传入回调函数，直接调整类型声明即可：

declare module 'picoapp' {
  export function component(callback: (node: HTMLElement) => void): void
}

兼容版（支持两种调用方式） #

如果picoapp的component本身支持两种调用逻辑：既可以直接传入DOM节点，也可以传入回调函数，你可以用函数重载实现多场景兼容：

declare module 'picoapp' {
  // 重载1：直接传入DOM节点
  export function component(node?: HTMLElement): void
  // 重载2：传入处理DOM节点的回调函数
  export function component(callback: (node: HTMLElement) => void): void
}

调整后再调用你写的业务代码就不会触发类型警告了。

内容的提问来源于stack exchange，提问作者Tobias Madsen