useReducerと分割代入について

Question

hooksのuseReducerを使っているのですがTypeScriptの型規約がどうしてもエラーを出してしまいます。

//hooks
export const useStudent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
 
 useEffect(()=> {
  dispacth(get());
}, []);

  const ChangeStudent = (id: number) => {
    return number + 1;
  };

  return [state, ChangeStudent];
};

//student.tsx
import { useStudent } from '../hooks/useStudnet.ts;
const  ListPage = () => {
const [state, ChangeStudent] = useStudent()
....
}

このようにするとTs側が

//useStudent()をホバーすると出てくるやつ
(alias) useStudent(): (any[] | ((id: number) => number))[]
import useStudent

//関数として使おうとすると
This expression is not callable.
  Not all constituents of type 'any[] | ((id: number) => number)' are callable.
    Type 'any[]' has no call signatures.

このように怒られてしまいます。解決策をご存知でしたらよろしくお願いします。

Answer 1

解決策をご存知でしたらよろしくお願いします。

このuseStudentのような、「タプルとしての配列」（1つ目がnumber、2つ目が関数、というように、入る位置ごとに型が決まっている配列）を返したい場合は、その旨を型宣言しないと、「numberもしくは関数の配列」とみなされてしまい、意図したように動作しません。

Comments

[2_34_koki]

例えば,さっきのChangeStudent関数を下記のような関数にする場合はエラーは発生しないのですが、何か違いがあるのでしょうか?
//const handleChangeStudent: (e: any) => void
const handleChangeStudent = e => {
dispatch(change(e.target.value));
}

[maisumakun]

handleChangeStudentとChangeStudentは同じ関数ですか？

[2_34_koki]

違います。他のhooksファイルで上記のコメントのような関数(dispatchをしているような)を渡して、うまく機能しているのですが、質問の関数のようにutilsのような役割を担う関数を渡そうとするとおっしゃったように型が判定できないみたいです。、なぜ、前者のほうも[state,Fuction]のように渡しているのにエラーが発生しないのだろうと思った次第です。
もちろん、utilsフォルダを切るという選択肢もあるのですが、知識向上の為にもこのやり方でやりたい感じです。

[maisumakun]

> 他のhooksファイルで上記のコメントのような関数(dispatchをしているような)を渡して、うまく機能しているのですが

dispatchに何を渡すかは無関係です。useStudent「自体」の型定義の問題です。

[maisumakun]

useReducerはきちんと「1つ目が値、2つ目が関数」と型宣言されているので、受け取ってそのまま使えます。

[2_34_koki]

おしゃる通りuseStudent「自体」の型定義を見たら、片方は配列になってたのでany型にしたらいけました。ありがとうございました