HTMLElements 是否有任何基本的 Typescript JSX 类型定义？答案

【问题标题】：Is there any basic Typescript JSX Type definition for HTMLElements?HTMLElements 是否有任何基本的 Typescript JSX 类型定义？
【发布时间】：2022-12-18 11:30:40
【问题描述】：

我目前在 Typescript/JSX 中使用一个 web 组件，它没有 Typescript 声明（我对 TS 和 JSX 很陌生）。但是我的组件没有使用记录的[elemName: string]: any;：

declare global { 
    namespace JSX { 
        interface IntrinsicElements {
            [elemName: string]: any;
        } 
    }
};

或者调整后的版本：

interface IntrinsicElements {
    "my-external-component": {[attribute: string]: any};
}

我希望有一个相当具体的通用 HTMLElement 类型，它像这样相交：

interface MyExternalComponent {
    "api-key": string
}

declare global { 
    namespace JSX { 
        interface IntrinsicElements {
            "my-external-component": MyExternalComponent & BaseHTMLElement;
        } 
    } 
};

然后将所有官方 HTMLElement 属性描述并提供为键值对。 BaseHTMLElement 之类的东西是否存在，或者我是否必须自己从头开始定义它，就像我在其他库中看到的那样？或者在任何现有库中是否有任何相当通用的声明，我可以在不引入库特定的东西的情况下重用？

【问题讨论】：

标签： javascript typescript jsx typescript-typings web-component

【解决方案1】：

你的意思是这样的？

interface MyExternalComponent {
  "api-key": string
}


class MyComponent extends React.Component<MyExternalComponent & React.HTMLProps<HTMLElement>, {}> {
  render() {
    return (
      <div>
        /* ... */
      </div>
    );
  }
}

更新：

没有任何框架（如 React、Vue 等）：

interface MyExternalComponent {
  "api-key": string
}

declare global { 
  namespace JSX { 
      interface IntrinsicElements {
          "my-external-component": MyExternalComponent & HTMLElement;
      } 
  } 
};

【讨论】：

是的，完全正确，但没有与 React 耦合，但没有任何框架或库，所以我可以将它附加到任何随机的 Web 组件，这些组件不附带类型。（如果这有意义的话）