## はじめに
propsでコンポーネントにデータを渡す際の型定義のテクニックについて書いていきます。

## 型定義について
コードを書いていきます。
![img](/mosaic-code.jpg)
まずは、親コンポーネントであるpage.tsxでpropsで送るデータの型を決めます。
そして、子コンポーネントであるPractice.tsxにpropsを渡します。
この時に、nameはstring型に、ageはnumber型に設定してるので、それ以外の型のを渡そうとすると、以下のようにエラーになります。
![スクリーンショット 2023-07-21 20.57.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/3d7fdaad-633e-1955-e8b3-45c76adb5d65.png)


![img](/mosaic-code.jpg)
データを受け取った子コンポーネント側では、以下のコードで、親コンポーネントと同じように型定義を行います。
![img](/mosaic-code.jpg)
そして、受け取ったpropsに対して、型を定義します。
![img](/mosaic-code.jpg)
例えば、以下のように違った型を定義すると、親コンポーネントでエラーになります。
![スクリーンショット 2023-07-21 21.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/1da4e87a-16ec-89da-b6dc-2b33def2a7bc.png)

## まとめ
このように、TypeSciptを使って、propsで渡すデータに型を定義するのは、安全に値を渡すことができるようにして、バグのリスクを減らしたり、開発効率の向上が期待できるのです。


## 最後に
他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)
[cv:issue_marketplace_engineer]

## はじめに
propsでコンポーネントにデータを渡す際の型定義のテクニックについて書いていきます。

## 型定義について
コードを書いていきます。
``` page.tsx
type text = {
    name: string;
    age: number;
}
  
return (
    <>
      <Practice name={"hukuryo"} age={25}/>
    </>
)
```
まずは、親コンポーネントであるpage.tsxでpropsで送るデータの型を決めます。
そして、子コンポーネントであるPractice.tsxにpropsを渡します。
この時に、nameはstring型に、ageはnumber型に設定してるので、それ以外の型のを渡そうとすると、以下のようにエラーになります。
![スクリーンショット 2023-07-21 20.57.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/3d7fdaad-633e-1955-e8b3-45c76adb5d65.png)


``` /components/Practice.tsx
type practiceText = {
    name: string;
    age: number;
}

export function Practice(props: practiceText) {
    const { name, age } = props;
    return(
        <div className="text-center mt-10">
            <h1 className="mb-10">Practice props</h1>
            <h4 className="font-bold mb-5">名前：{name}</h4>
            <p></p>
            <h4 className="font-bold">年齢：{age}歳</h4>
            <p></p>
        </div>
    )
}
```
データを受け取った子コンポーネント側では、以下のコードで、親コンポーネントと同じように型定義を行います。
```
type practiceText = {
    name: string;
    age: number;
}
```
そして、受け取ったpropsに対して、型を定義します。
```
export function Practice(props: practiceText) 
```
例えば、以下のように違った型を定義すると、親コンポーネントでエラーになります。
![スクリーンショット 2023-07-21 21.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/1da4e87a-16ec-89da-b6dc-2b33def2a7bc.png)

## まとめ
このように、TypeSciptを使って、propsで渡すデータに型を定義するのは、安全に値を渡すことができるようにして、バグのリスクを減らしたり、開発効率の向上が期待できるのです。


## 最後に
他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)


はじめに

型定義について

続きを読むには単価診断を受けてください（30秒）