React（TypeScript）でコンポーネントにいろんな型のPropsを色んなパターンで渡してみた

ReactでコンポーネントにPropsを渡す時に、TypeScriptだと型が合わずにエラーでハマることが多いですし、書き方もたくさんあって何が何やら…。なので、メモの意味も兼ねて色んなパターンの値渡し、型の指定をやってみました。

1. 数値型を一つ渡してみた

まずはシンプルに数字型をひとつ渡してみます。

<ChileComponent id={1} />

export const ChildComponent: React.FC<{ id:number }> = ({ id }) => {
};

console.log(id)

=> 1

数字の1がnumber型でそのまま表示されました。なるほど。

子コンポーネントで受ける時に{}で囲んでますが、これがないとどうなるんでしょう？

<ChileComponent id={1} />

export const ChildComponent: React.FC<{ id:number }> = ( id ) => {
};

console.log(id)

=> id:1

なるほど、id=1って感じで値だけじゃなくて親コンポーネントで指定した名前でオブジェクトになるんですね。ややこしいですねぇ。

2. 数値型と文字列型を2つ渡してみた

次はPropsを２つ渡してみます。数値型と文字列型です。

<ChileComponent id={1} name={'hoge'} />

export const ChildComponent: React.FC<Props{ id:number, name:string }> = ({ id, name }) => {
};

console.log(id)

=> 1
=> 'hoge'

数字の1がnumber型で、hogeが文字列型でそのまま表示されました。なるほど。

3. オブジェクト型を渡してみた 1

次は複数の値をもつオブジェクト型のパターンをやってみます。まずは直接書いてみます。

<ChileComponent data={{ id:1, name:'hoge' }} />

export const ChildComponent: React.FC<{test:{ id:number, name:string }}> = ( data ) => {
};

こんな感じで書けるみたいですね。
子コンポネントの型指定は「React.FC<この中にいれる>」みたいですね。んで結果は「( data )」で受け取るみたいですね。親でdataと指定してPropsを渡しているからですね、なるほど。受け取る変数名が一致せず、どちらかが違っていたらエラーが出るみたいです。

console.log( data )

=> test: {
  id: number
  name: string
}

結果はこんな感じでした。なるほど、「test=」として渡しているから、「test」というオブジェクトで包まれて渡るんですね。

4. オブジェクト型を渡してみた 2

でもtestで包んでほしくない場合もありますね。どうしたらいいんでしょう？
調べたら書き方ありました。

<ChileComponent id={1} name={'name'} />

export const ChildComponent: React.FC<{ id:number, name:string }> = ( { id, name } ) => {
};

console.log( id )
console.log( name )

=> 1
=> 'hoge'

ちゃんとそれぞれで表示されました。なるほど。

4. オブジェクト型を渡してみた 3

他にもこんな書き方もできるようです。これはtestで包まれずにPropsを送ることができるので、例えばここだと、子コンポネント側で直接idやnameを渡すことができるようです。

const test = {
  id: 1,
  name: 'hoge',
}

<ChileComponent {...test} />

export const ChildComponent: React.FC<{id: number, name: string}> = ( {id, name} ) => {
};

console.log( data )

=> 1
=> 'hoge'

なるほど、ちゃんと取れました。
これの良いところは、こんな感じでたくさん要素があったとしても、子コンポネント側で好きな値だけを拾えるようですね。idだけが欲しい場合はこんな感じで。

export const ChildComponent: React.FC<{ id: number }> = ( {id} ) => {
};

console.log( id )

=> 1

なるほど、idだけが取れました。
全部の要素はいらないけど、一部だけ欲しいときに便利ですね。

ちなみにこのやり方を分割代入というらしく、この「…」で始まる表記はスプレット構文と言うらしいです。「{…オブジェクト名}」で渡して、受け取る方は、ほしい要素だけを{}で囲んで書けばいいみたいです。最初見たときは表記ミスかと思いましたね。

5. 型を別で宣言する

ちなみにここまでの書き方、変数が少数ならいいですけど、いっぱいあったら書くの辛そうです。
でも、Propsと型を別で宣言できるみたいですね。書いてみます。

const data = {
  id:1,
  name: 'hoge'
}

<ChileComponent data={ data } />

type Props = {
  id: number;
  name: string;
};

export const ChildComponent: React.FC<Props> = ( test ) => {
};

console.log( data )

=> test: {
  id: number
  name: string
}

// 結果は同じ！

型宣言やPropsの宣言を外に出してみましたが、同じ結果が得られました。
なるほど、これなら値が多くてもスッキリしますね。

単に値を渡すといってもいろいろなパターンが有り、さらにそこに型が加わってくるので、すごく難しかったですね。ですが逆をいうと、これだけガチガチになるならバグは入りにくいとも言えるので、より堅牢なロジックをつくることができそうです。

今回は以上です！