TypeScriptで関数の型チェックをする方法

Question

Reactでアプリケーションを作っており、投稿フォームと編集フォームを共通化したいと思ったのですが、TypeScriptの型エラーで躓いています。

postQuote関数とupdateQuote関数のどちらかをmutateで受け取り、編集の場合には初期値であるinitialQuoteを受け取るフォームコンポーネントを作成しました。

mutate関数をonSubmitで実行したいのですが、mutateの型が特定できず、コンパイルエラーが発生してしまいます。

プリミティブな型ならtypeof演算子で型チェックを行うことができますが、関数の場合どうすればよいのでしょうか？

ご存知の方いらっしゃいましたら教えて頂けると助かります。よろしくお願いいたします。

interface Props {
  initialQuote?: Quote;
  mutate:
    | ((postQuoteInput: PostQuoteInput) => Promise<boolean>)
    | ((updateQuoteInput: UpdateQuoteInput, id: number) => Promise<boolean>);
}

const QuoteFrom: React.VFC<Props> = ({ initialQuote, mutate }) => {
  const onSubmit = async (data) => {
    // mutateの型を特定できない
    const success = await mutate(data);
    if (success) {
      ...
    }
  };

  return (
    <>
      <form onSubmit={onSubmit}>
       ...
      </form>
    </>
  );
};

export default QuoteFrom;

Answer 1

いちおう、Function.prototype.lengthで関数が受け取る仮引数の数は見分けられるので（MDN）、どちらが渡されたかの判定はできなくはないです。

…が、呼ぶ前に「どちらか判定して」「正しい型にキャストして」実行する必要があるため、TypeScriptで書くにはデメリットしかない形となってしまいます。

2つの関数を別々な引数で受け取れるようにすることをおすすめします。

Comments

[maisumakun]

「const success = await mutate(data);」だと、2引数版のときは引数が足りないです。

[maskmelon]

別の引数で受け取ればよいというのは盲点でした。
無事共通化することができました。ありがとうございました。