Typescript * ReactでFuntion Componentに引数を渡す

はじめに

少しばかり仕事でReactを使う機会があります。
Reactを触った事ないし、Typescriptも触った事なくて、ドキュメントも結構少ないため、苦戦しながら書いてます。。
でもLintが厳しく指導してくるのが癖になってきて、先生に教えられているみたい。
自分へのメモ兼Typescript＊Reactを使う事になってしまった人のために書きます。

Function Component

Reactのチュートリアルやって、そもそもJavascriptにClassなんてあったんだ・・・！
なんて気持ちだったのに、最新版のReactではClassComponentではなく、FunctionComponentを使っていこうな感じらしい。

親側のコンポーネントから何か値を入れたい時の書き方をメモする。

import * as React from 'react';
const App : React.FC = () => {
    return(
        <>
            <Child1 name="yuma1217" />
            <Child2 name="yuma1217" />
        </>
    );
}

const Child1 : React.FC<{name:string}> = (prop) => {
    return(
        <div>
            {prop.name}
        </div>
    );
}

interface IAppInterface {
    name : string;
}

const Child2 : React.FC<IAppInterface> = (prop) => {
    return (
        <div>
            {prop.name}
        </div>
    );
}

二つのChildコンポーネントは同じことをしている。
Child2のInterfaceを使うやり方がTypescriptでは正しいんだと思うんだけど、最初の学習でInterface書くの少ししんどくて。。
そんなときはChild1のように書ける。
型指定しないと怒られるので、もし面倒だったら、とりあえずanyにして置けば大丈夫。(怒られないってだけで本番の開発ではしっかり型指定した方が良さそう)