如何在 JSX 中扩展 HTMLButtonAttribute 类型

Question

我正在使用 StencilJS 创建一个简单的按钮组件，它使用 JSX 和 TypeScript。当前的稳定版本没有属性 part 的类型。基本上我正在尝试这样做：

render() {
   return <button part="live-chat-button">{this.getStartButtonText()} </button>;
}

但是打字稿错误：

Type '{ part: string; }' is not assignable to type 
'ButtonHTMLAttributes<HTMLButtonElement>'. Property
'part' does not exist on type 'ButtonHTMLAttributes<HTMLButtonElement>'.

除了升级到固定的 alpha version，我该如何解决这个问题？

在此先感谢您的帮助！

Answer 1

您应该能够使用模块扩充向任何 jsx 元素添加属性：

declare module '@stencil/core' {
  namespace JSXElements {
    interface ButtonHTMLAttributes<T> {
      part?: string
    }
  }
}

这应该适用于按钮。

如何在 JSX 中扩展 HTMLButtonAttribute 类型

How to extend HTMLButtonAttribute type in JSX

jsx

typescript

stenciljs