react-three-fiber(typescript)でreact-springのanimatedを使うと型でエラーが出た時の対処法
環境
- react: 18.2.0
- react-three-fiber: 8.8.6
- react-spring/three: 9.5.5
- three: 0.144.0
reactでthree.jsを扱う際にライブラリとしてreact-three-fiberという便利な物があるので勉強がてらにreact + typescript環境に入れて触っていたところこんなエラーに遭遇しました。
型のインスタンス化は非常に深く、無限である可能性があります。とエラーが出る
なにこれ？と思い検索してみたのですが、どうやら型が多すぎる(?)ようでこのエラーを吐いていたみたいです。
色々調べてみたのですが、結局react-three-fiber上のこのエラーに対しての回答らしき物が無く色々試してみた結果エラーが解消できたので共有しようと思います。
エラーの原因
エラーの原因は上でも申し上げた通り型が多すぎる事でした。
具体的に言うと、animated.meshに渡していたpropsの型とanimated自体の型が混ざってしまい、このエラーが出されてしまっていました。
animated.meshに渡していたpropsを消すと、エラーが消える
ちなみにというかここが大事なのですが、propsの型はreact-three-fiberのThreeElements["mesh"]です。
(何故この型なのかというと、react-three-fiber公式のgithubにこの型指定が書かれていたからです)
解決策
ただし、自分の場合はpropsでpositionやcastShadowなどを渡したかったので、自分がいじりたいpropsだけを渡すといった形にしました。
ThreeElements["mesh"]ではなく、自分の渡したいプロパティーだけを書いてあげる(自分の場合はpositionとcastShadowを渡したかったのでこの二つを型指定しています)
そうすると、
propsを渡してもエラーが出なくなりました！
参考
readmeの下の方に行くとtypescriptの例があります
react-three-fiber公式docsのtypescirptについて
最後に
今回初めて記事を書いたので変な所や誤字脱字、またはより良い解決策を知っている方がいれば是非教えてください！(ThreeElementsで簡単にmeshのpropsの型が作れるなー思ったので正直直接型を入力するのはめんどくさい)
Discussion