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} />;
}