ReactとTypeScriptでHTML属性を拡張する方法について

HTML 要素の属性は、歴史的な理由などにより様々な記述ができる。

1. React.ComponentPropsWithoutRef<“button”>
   1. 基本的にこれだけ覚えておけばいい。
   2. React.ComponentProps に依存。
2. React.ComponentPropsWithRef<“button”>
   1. React.ComponentProps に依存。
   2. Ref Forwarding 対応をする場合に使用。
   3. Ref Forwarding より単純に Ref を渡す方が基本的に有益なため、あまり使う機会はないかもしれない。
3. React.ComponentProps<”button”>
   1. Forwarded Ref かの判別が困難なため、React.ComponentPropsWithoutRef と React.ComponentPropsWithRef が推奨されている。
   2. JSX.IntrinsicElements に依存。
4. JSX.IntrinsicElements[“button”]
   1. React.DetailedHTMLProps に依存
5. React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
   1. 対応した React.XXHTMLAttributes に依存
6. React.ButtonHTMLAttributes<HTMLButtonElement>
   1. 各属性がベタ書きされている。本質。
7. React.HTMLProps<HTMLButtonElement>
   1. React.AllHTMLAttributes に依存
   2. Isomorphic components を雑に作りたい場合など、とりあえずで型を与えたい場合に便利かもしれない…
8. React.AllHTMLAttributes<HTMLButtonElement>
   1. React.HTMLAttributes に依存
   2. その名の通り全ての属性が与えられる。
   3. 要素によって規約が異なる属性値は丸められている。
      1. 例えば type が string になる。
9. React.HTMLAttributes<HTMLButtonElement>
   1. Aria 属性やハンドラーなど、共通して与えられる標準的な HTML 属性が定義されている。
   2. その要素固有の属性が与えられない。

React.ComponentPropsWithoutRef を利用したコンポーネントの例。

1
interface SomeComponentProps extends React.ComponentPropsWithoutRef<"button"> {
2
  additionalProp?: string;
3
}
4

5
export const SomeComponent = (props: SomeComponentProps) => {
6
  return <button type={props.type}>SomeComponent</button>;
7
};