TypeScript & React: HTML 属性をプロップスで受け取る場合の型定義には JSX.IntrinsicElements が便利

TypeScript & React: HTML 属性をプロップスで受け取る場合の型定義には JSX.IntrinsicElements が便利

February 15, 2022

例えばスタイリングされたパーツのコンポーネントを作るとして、ある HTML 属性をプロップスで受け取るようにする場合、これまでは MDN のドキュメントを見て手打ち入力していました。

type Props = {
  text: string;
  type: 'button' | 'submit' | 'reset';
};

export function StyledButton(props: Props) {
  const { text, type } = props;
  return <button type={type}>{text}</button>;
}
type Props = {
  inputMode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
};

export function StyledInput(props: Props) {
  const { inputMode } = props;
  return <input inputMode={inputMode} />;
}

これでも問題はないですが、属性が多くなる場合だと入力するのが面倒ですね。

JSX.IntrinsicElements #

JSX.IntrinsicElements にこれらの型が定義されているため、それを利用すれば自分で入力する必要はありません。(ということを最近知りました)

type Props = {
  text: string;
  type: NonNullable<JSX.IntrinsicElements['button']['type']>;
};

export function StyledButton(props: Props) {
  const { text, type } = props;
  return <button type={type}>{text}</button>;
}
type Props = {
  inputMode: NonNullable<JSX.IntrinsicElements['input']['inputMode']>;
};

export function StyledInput(props: Props) {
  const { inputMode } = props;
  return <input inputMode={inputMode} />;
}