【TypeScriptメモ】Reactコンポーネントのpropsの型について
目次
Reactコンポーネントのpropsの型について調べたメモ。基本的にはtypeではなくてextendsが利用できるinterfaceを使った方が良さそう。
基本の形
export interface MyComponentProps {
value: string;
}
export const MyComponent = (props: MyComponentProps) => {
return <div>{props.value}</div>;
};
MyComponent.displayName = 'MyComponent'
コードスニペットに登録しておく
VSCodeを使っている場合はコードスニペットに登録しておくと便利。
VSCode画面の左下の歯車のアイコンからUser Snippetsを選択して、tsxと入力して検索。.tsx用のスニペット設定ファイルを開いて、以下をコピペ。
"component": {
"prefix": "cmp",
"body": [
"export interface $1Props { }",
"",
"export const $1 = (props: $1Props) => {",
" return null",
"}",
"",
"$1.displayName = '$1'"
],
},
こちらの記事を参考にしました
これで.tsxファイルでcmpと入力してtabを押すと、この型付きのコンポーネントの雛形を呼び出せるようになりました。
拡張(extends)を使う場合
extendsを使う場合はComponentPropsを使う
input.tsx
import { ComponentProps } from "react";
export interface InputProps extends ComponentProps<"input"> {}
export const Input = (props: InputProps) => {
return <input {...props} />;
};
Input.displayName = 'Input'
コンポーネントにrefを渡したい場合
forwardRefを使う。
extendsと一緒に使いたい場合はComponentPropsWithRefを使う。
import React, { ComponentPropsWithRef } from "react";
export interface ButtonProps extends ComponentPropsWithRef<"button"> {}
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
return <button {...props} ref={ref} />;
},
);
Button.displayName = Button;
forwardRefの型は<T, P>の形になる。
こっちもスニペットに登録しておく
forwardRefを使った書き方は特殊でよく忘れるのでこれもスニペットに登録しておくと便利。
さっきと同じ要領で以下を設定ファイルにコピペしてください
"component with ref": {
"prefix": "cmpref",
"body": [
"import { forwardRef, ComponentProps } from 'react';",
"",
"export interface $1Props extends ComponentProps<'$2'> { }",
"",
"export const $1 = forwardRef<HTML$3Element, $1Props>((props, ref) => {",
" return null",
" },",
");",
"",
"$1.displayName = '$1';",
],
},
