React + TypeScriptのButtonコンポーネントのpropsで使う型定義

Posted at 2024-08-26

React + JavaScript

<Button className="..." onClick={...} ...>アカウントを作成</Button>

export default function Button({ children, ...props }) {
    return (
        <button {...props}>{children}</button>
    );
}

React + JavaScriptでは上記のように記述してButtonコンポーネントを作成しています。
propsにはdisabledやonClickなど、buttonタグで使用する要素が入ってきます。

TypeScriptには型が存在します。
React + TypeScriptでもJavaScriptと同様にButtonコンポーネントを作成したいのですが、その際の型の記述はどうしたら良いでしょうか。

export type ButtonType = React.ButtonHTMLAttributes<HTMLButtonElement> & {
    children: React.ReactNode
}

※詳しくはこちらを参照

この型指定により、通常のbuttonタグと同様、<Button>の中で属性を指定することができるようになります。

あとはButtonコンポーネントの引数に型を指定してあげれば、解決します。

export default function Button({ children, ...props }: ButtonType) {
    return (
        <button {...props}>{children}</button>
    );
}