TypeScriptを使ってReactのFunctionalComponentに型安全にpropsを渡す

import React, { FunctionComponent } from 'react';

type Props = { title: string }
const Title: FunctionComponent<Props> = props => {
  return <>
    <h1>{props.title}</h1>
  </>
}

または、以下のようにtypeの定義省略することも出来る。

import React, { FunctionComponent } from 'react';

const Title: FunctionComponent<{ title: string }> = props => {
  return <>
    <h1>{props.title}</h1>
  </>
}

使用する時はこのように使う。

function App() {
  return <>
    <Title title="Hello World" />
  </>
}

関連記事

• 雰囲気で使わない @types/react - Qiita