はじめに

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

型定義について

コードを書いていきます。

まずは、親コンポーネントであるpage.tsxでpropsで送るデータの型を決めます。
そして、子コンポーネントであるPractice.tsxにpropsを渡します。
この時に、nameはstring型に、ageはnumber型に設定してるので、それ以外の型のを渡そうとすると、以下のようにエラーになります。

データを受け取った子コンポーネント側では、以下のコードで、親コンポーネントと同じように型定義を行います。

そして、受け取ったpropsに対して、型を定義します。

例えば、以下のように違った型を定義すると、親コンポーネントでエラーになります。

まとめ

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

最後に

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

基本設計について
Vue.jsとNode.jsでチャットアプリを作った
Next.js×TypeScriptでTODOアプリを作成する
[cv:issue_marketplace_engineer]