React + TypeScriptでファンクショナルコンポーネントを定義するときの話。
以下の方法でも可能は可能。
type Props = { name: string } const Person = ({ name }: Props) => { return ( <h2>{name}</h2> ) } export default Person;
ただ、Person
がファンクショナルコンポーネントとして定義されていない。
以下のように定義してみると、、、
import { FC } from 'react'; type Props = { name: string } const Person: FC = ({ name }: Props) => { return ( <h2>{name}</h2> ) } export default Person;
単純にFC
を定義しても、エラーが出る。
Type '({ name }: Props) => JSX.Element' is not assignable to type 'FC<{}>'. Types of parameters '__0' and 'props' are incompatible. Property 'name' is missing in type '{ children?: ReactNode; }' but required in type 'Props'.ts(2322)
FC<Props>
と定義すればよい。
import { FC } from 'react'; type Props = { name: string } const Person: FC<Props> = ({ name }) => { return ( <h2>{name}</h2> ) } export default Person;