Solid.js(TypeScript環境)でMaterial Web-Componentsを使おうとした時、型エラーが発生した。
少し詰まったので自分用メモ。

原因

Solid.jsでWebコンポーネントを使おうとした時に、Solid.jsがmaterial web componentsの型定義を見てくれず、なんじゃこのタグと言われる。

.ex)

App.tsx

import '@material/web/button/outlined-button.js';

function App {
    return (
        <md-outlined-button type="reset">Reset</md-outlined-button>
    );
}

export default App

解決法

必要に応じて、tsconfigに以下を追加

tsconfig.json

{
    "include": ["src", "src/global.d.ts"]
}

続けてsrc/global.d.tsに以下を追加

global.d.ts

import "@material/web/all"

type WithAnyChildrenAndClasses = {children:any} | {} | {class?:string, classList?:Record<string,boolean>};

type SolidInterface = {
  [P in keyof HTMLElementTagNameMap]: HTMLElementTagNameMap[P] | WithAnyChildrenAndClasses;
};

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements extends SolidInterface { }
  }
}

参考