【React v16.8 FunctionComponent + TypeScript】コンポーネント作成のド基礎

react超初心者用です。
現場でReact v16.8からのFunctionComponent型（今後FCと呼びます）を使用する機会があったのでメモ程度にド基礎をまとめました。
間違っているところがあればご指摘いただけると幸いです！！
超簡単なプロフィールを表示するコンポーネントでまとめます。

#全体

import React from 'react'

interface PersonProps {
  name: string,
  age?: number,
  agree?: Function,
}

const Person: React.FC<PersonProps> = props => {
  const {
    name,
    age,
  } = props

  const agree = () => {
    console.log(`${name}は${age}才です`)
  }

  return (
    <React.Fragment>
      <span>name : {name}</span><br />
      <span>age : {age}</span><br />
      <button onClick={agree}>agree</button>
    </React.Fragment>
  );
}

export default Person

順を追って説明します。

##必要モジュールのインポート
必要なのはReactのみなのでReactをインポートします。

import React from 'react'

##プロパティやメゾットの定義

interface ParsonProps {
  name: string,
  age?: number,
}

interfaceを使ってプロパティやメゾットの型の定義をしていきます。
interface 名前で定義できます。

プロパティorメゾット: 型で使用する型を決められます。
親からpropsで渡ってくる時、ここに記述している型以外の型の場合と、空の場合は、TypeScriptがエラーを知らせてくれます。
age?: numberの『?』は省略可能という意味で、プロパティを使用しない場合にはundifindeが入ります。
空になる可能性のあるプロパティ、メゾットにはつけてあげるといいでしょう。

interfaceはtypeでもほぼ同じことができるそうです。
違いについて知りたい方はTypeScriptのInterfaceとTypeの比較
という記事が参考になったので是非

##コンポーネント作成

const Person: React.FC<PersonProps> = props => {
  const {
    name,
    age,
  } = props

  const agree = () => {
    console.log(`${name}は${age}才です`)
  }

  return (
    <React.Fragment>
      <span>name : {name}</span><br />
      <span>age : {age}</span><br />
      <button onClick={agree}>agree</button>
    </React.Fragment>
  );
}

分けて見ていきます。
###Personというコンポネントを作る宣言

const Person: React.FC<PersonProps> = props => {}

型にReactFC型を用いてあげて、ジェネリクスに上記で作成したinterfaceを指定してあげます。
ジェネリクスを用いることによってinterface内に複数、型があってもまとめて記述できます。
そしてpropsを引数に渡してあげます。
これによって、コンポネント内でprops.xxxすると呼び出せます。
###propsの扱いと関数

const {
    name,
    age,
  } = props

  const agree = () => {
    console.log(`${name}は${age}才です`)
  }

コンポネント内でprops.xxxすると呼び出せます。

と書きましたが、propsは僕はまず分裂代入してから使います。
propsの中身をそれぞれname,ageに代入しなおしてあげます。
これによってagree関数を見ると、props.の記述が不要になることがわかります。
nameもageもagree()もinterfaceで型定義してあげたから使用できるという点が大切かと思います。

###render、エクスポート

return (
    <React.Fragment>
      <span>name : {name}</span><br />
      <span>age : {age}</span><br />
      <button onClick={agree}>agree</button>
    </React.Fragment>
  );
export default Person

レンダリングのところは通常どおりです。

##親で使ってみる

import Person from '../Person'

<Person
  name="jon"
  age={12}
/>

親で使用時に注意なのが、name,ageには決められた型以外が入るとエラーになる点です。
これもTypeScriptの機能です。
ageは省略可能にしてあるので、プロパティの記述がなくてもエラーになりません。

こんな感じででてきて、ボタンを押すとconsoleに『jonは12才です』とでます
##まとめ
最初にFC+TypeScriptで書かれてるのをみたときなんじゃこりゃと思いましたが、一つ一つ勉強していくと世界がかわりました。
これがプログラミングのいいところだなと思って嬉しく思ってます。
よんでいただきありがとうございました。
修正点、改善点ございましたらお待ちしています。