お、お久しぶりです！！
先週は本業の疲れからか学習をサボってしましました！
2週間ぶりに学習したので、アウトプットしていきますー！

本日の学び✍️

前回に引き続きTypeScript（以下、TS）について学習しております。
TSは現代のフロントエンド開発では必須と言われているそうなので、しっかり学ばないといけなさそうですね。。。
ただ僕みたいにカオス(w)なコードを書く人にとっては、TSで規律性やルール付けをできると、他の人からもレビューしてもらいやすくなるのかなーと思ってます！（きれいなコードを書けw）

コンポーネントの型定義

コンポーネント自体に型定義をすることができる。

export const componentA: FC<Props> = (props) => {
  //省略
};

コンポーネント名の後に ': FC'と付け加えることで、これはコンポーネントですよ〜と宣言することができる。
そして:FCの後に<xxx>とすることで、受け取るpropsをどのような型で受け取るかを宣言できる。
つまり・・・

// types/User.tsx
export type User = {
  name: string;
　　　　address: string;
};


//~~~~~~~~~~~~~~~~~~~~~~~~~


// ComponentA.tsx
type Props = {//型定義
  user: User;
};

export const componentA: FC<Props> = (props) => {
  const { user } = props;
};

例えばこのようにすることで、

1. componentAで受け取るpropsは型<Props>で定義した型で受け取れることが宣言できる。

2. 型<Props>の中身はというと、userという変数で型USERで定義した値を受け取ることができる。

3. 型USERはtypes/User.tsxで定義している型である。型Userはnameを文字列型、addressを文字列型で宣言している。

つまり・・・

componentAで受け取るpropsは同ファイルで定義した型Propsのルールに則った値が入る。そして型Propsはtypes/User.tsxで定義したUserという情報をuserという変数に格納している。Userには名前、住所の型情報が載っている。
源泉であるtypes/User.tsxで定義した型情報をcomponentA.tsxで受け取り変数に格納し、propsにその型を落とし込むという流れになっている。

なかなか言語化するのが難しいですが、ざっとこんな感じで解釈しました・・・とても難しい・・・（ ;  ; ）
けど言語化することで理解はめちゃ深まりました！
最終的な使い方としては以下のようなコードになりました。

// types/User.tsx（型定義用ファイル）
export type User = {
  name: string;
　　　　address: string;
};


//~~~~~~~~~~~~~~~~~~~~~~~~~


// ComponentA.tsx（子コンポーネント）
type Props = {//型定義
  user: User;
};

export const componentA: FC<Props> = (props) => {
  const { user } = props;
　　　　return (
    <dl>
      <dt>名前</dt>
      <dd>{user.name}</dd>
      <dt>住所</dt>
      <dd>{user.address}</dd>
    </dl>
  );
};


//~~~~~~~~~~~~~~~~~~~~~~~~~


// App.tsx（親コンポーネント）
const user: User = {
  name: "太郎",
  address: "東京都港区x丁目",
};

export default function App() {
  return (
    <div className="App">
      <componentA user={user} /> // コンポーネントを呼び出す
    </div>
  );
}

App.tsxにてprops「user」に型Userで定義した通りの規則に則った値（名前、住所）を指定する。
そして、componentA.tsxにてそのpropsを型Userで定義した通りの規則に則った値で受け取る。
そして、それを変数userに分割代入することで、user.nameで名前を、user.addressで住所を出力することが可能となる！

上記をいきなり言語化するのは、初心者の僕にとっては中々大変だったので、殴り書きではありますが図を書いてみました！自分が見るようなので非常に見ずらいし読み取ってもらわなくても良いのですが・・・w
目に見える形でコードをビジュアル化してみると理解が深まりやすいな〜〜と実感しました🥸

まとめ🙆‍♂️

TypeScriptのおかげでエディターの補完が楽になったりエラーを吐き出してくれたり、便利さが着々と理解できてきました🙌