毎日、何か新しいことを。iconなんかパッと出てこなかったのでメモ簡単に以下の画像のようなアプリケーションを作成してみます。デフォルトの数字を親から受け取り、ボタンを押してインクリメントしたりデクリメントしたりリセットしたりするようなものです。これをrecomposeを使って実装してみます。recomposeってなに?って方は、以下の記事も参考にしてみてください。親コンポーネントのpropsを子コンポーネントに伝達する方法がわからないAtomicDesignの設計で組んでいくと、親から子へpropsを伝搬させることが多々あります。そこで、recomposeと組み合わせたときにも親から子へ流す方法をしる必要がありました。今回の場合は、以下のように親から受け取ったdefaultNumを子コンポーネントで表示させる方法です。以下のようなめちゃくちゃシンプルな親子のコンポーネントを考えます。CounterBoard;上の例ではrecomposeを使う意味はまったくないですが、例のために仕方なくです・・。})でpropsを受け取っている部分です。知ってしまえばなんてことないけど、最初はここはpropsと書くべきなのか、defaultNumと書くべきなのかなどで詰まったりしました。子コンポーネントで受け取る引数は()の中ではなく、({})の中に書きます。することで、指定した名前のprops単体を受け取ることができます。以下のような書き方でも同じです。TypeScriptを使っていると親の方で「子でそれを受け取るやつがないぞ」と言われる問題その1は解消したのも束の間、compose関数内にちゃんとロジックを書いていくと、以下のようなエラーに遭遇しました。c...'.これは、親のParentComponentの方で起こっているエラーです。親ファイルの中では、defaultNum={5}というふうにdefaultNumを渡しているけど、子の方ではそれを受け取る記述がないぞと言われています。recomposeのAPIに型を与えていきます。以下のコードは型を全く書いていない、エラー出まくりのものです。簡単のため、withState内で定義している数字の初期値は親propsのものではなく、定数の5としています。(理由は後述)なので、下のコードではボタンを押しても表示されている数字に変化はありません。CounterBoard;これらに適切に、型を与えていきます。今回、型を与えるべきものに以下の4つがあります。composewithStatewithHandlerCounterBoardPresenterエラーの原因はcomposeに型が与えられていないからです。atomのパワーを借りて、型を確認してみます。ちなみにこれは型定義ファイルを直接読みに行っても同じです。こんなふうに表示されました。TOutter>;どうやら、「TInner」と「TOutter」に当たる型を定義する必要があるようです。componentに対する型。ここでは、「子コンポーネント」と呼んでいる、CounterBoardPresenterの型のこと。componentに対する型。recomposeを使用して作成されたすべてのprops。ここでは、withStateとwithHandlerを使っており、その中で、counterという変数や、incrementという関数などを使用していますが、これらの型のことです。以上を踏まえて型を定義していきます。型を定義するまずは、CounterBoardPresenterに対する型、ComponentPropsインターフェースを定義します。親から受け取るpropsなので、今回はdefaultNumのみです。number;}次に、withStateに対する型。WithStatePropsインターフェースです。void;}少しややこしいですが、updateCounterの型は、「『number型を引数にとり、number型を返す関数』を引数にとり、void型を返す関数」という意味を示しています。同様にして、withHandlerに対する型を定義していきます。void;}最後にこれらを組み合わせて、先程のTInnerとTOutterに対応する型を作成します。ComponentProps;型を加える型の準備ができたので、適用していきます。withState関数に型を加えてやります。'updateCounter'>('counter','updateCounter',5),そしてwithHandler関数にも加えます。updateCounter(5)})以上を組み合わせると以下のようになります。CounterBoard;以下の質問を見つけてこの解に行き着きました。先程は、withState内で、stateの初期値を5と設定しましたが、ここに親から受け取ったpropsである、defaultNumの値を入れたいとします。以下のコードは動きませんが、直感的に書くとこんな感じです。コレ!),また、withStateの中のみでなく、withHandlerの中のreset関数の中でも必要です。解決策withStateこんなふうにしてやります。defaultNum)詳しくは後述しますが、withStateは第3引数に変数もしくは関数をセットできますが、関数の場合、この関数の引数に親のpropsが入るように実装されているからです。withHandlerこんなふうにして渡してやります。これ!})こちらも、ほとんど同じ理由です。withHandlerがよくわからないよくわかないのは、内部実装がよくわかってないからです。機会ですので、内部のコードを読んでみます。思ったのですが、解説を書いてみるとめちゃくちゃ長くなってしまったので、別記事にしました。下記終わり次第、ここにリンクを貼ります。app)をちょっとだけ触ってみる。コメントをキャンセルメールアドレスが公開されることはありません。