typescriptのinterfaceに無名関数を定義した場合の挙動について（React.FunctionComponentの型定義について）

Question

知りたいこと

以下のようなinterfaceを定義します。

interface Itest {
  (param1: string, param2: number): boolean;
}

このinterfaceは以下のように使用することができます。

const testF: Itest = (param1, param2) => {
  return true;
};

どうしてこのように使用できるのかがわかりません。
typescriptのinterfaceの実装方法について自分でも調べましたが、
このようなinterface内で無名関数のようなものを定義する実装方法について言及されている記事は見つかりませんでした。

また、Itestが以下のような定義の場合、hogeはどのように設定することになるのでしょうか。

interface Itest {
  (param1: string, param2: number): boolean;
  hoge: string;
}

質問の動機

Reactの理解を深めようと思いReact.FunctionComponentの型定義を読んでいたところ、以下のような実装になっていました。

    interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }

２行目の(props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;の挙動について調べていましたが自分では解決できず、質問に至りました。

どなたかご教示いただくか、もしくはこの定義方法について言及されているドキュメントのリンクを教えてもらえると幸いです。
宜しくお願い致します。

Comments

[hoshi-takanori]

単純な関数の型は => で書けますが、JavaScript では関数にもプロパティを設定できたり、Date のように Date() と new Date() で挙動が違ったりするので、それを表現するための型なのでは。
https://www.typescriptlang.org/docs/handbook/2/functions.html#construct-signatures

また、引数の型によって戻り値の型を変える (オーバーロード) 場合も。
https://typescript-jp.gitbook.io/deep-dive/type-system/functions#no

[tanana_m]

ご教示いただきありがとうございます。

> JavaScript では関数にもプロパティを設定できたり、Date のように Date() と new Date() で挙動が違ったりするので、それを表現するための型なのでは。
関数にプロパティを設定するための型、と考えると納得できました。
具体的な使い道を教えていただきありがとうございます。

> 単純な関数の型は => で書けますが
これに関しては、以下のような形で関数の戻り値や引数の型を定義できるという意味で良いでしょうか？

```ts
const testFC = (param1: string, param2: number): boolean => { return true }
```

もしくはintaefaceの定義において=>を使用する場合があるということでしょうか？

[hoshi-takanori]

「単純な関数の型は => で書けますが」は例えばこんなのです。
type Itest = (param1: number, param2: number) => boolean;

[tanana_m]

理解しました、ありがとうございます。

もしご存知でしたら、ReactのFunctionComponentの型定義に登場する
propTypes, contextTypes, defaultProps, displayNameの使い方についてご教示いただければと思うのですが、可能でしょうか。

[hoshi-takanori]

自分もそんなに詳しくありませんが、propTypes や defaultProps は props の型を動的にチェックする仕組みで、TypeScript があればそれで充分じゃないかと…。contextTypes や displayName は分かりません。
https://ja.reactjs.org/docs/typechecking-with-proptypes.html

[tanana_m]

わかりました。
propTypesは確かにTypeScriptにおいては必要無いのではと思っていたのですが、公式ドキュメントに記載があったのですね、見落としていました。
教えていただきありがとうございます。

Answer 1

こちらにあるとおりです。

Comments

[maisumakun]

> どうしてこのように使用できるのかがわかりません。

「そういうルールだから」以上の回答を望んでいるのでしょうか？

[maisumakun]

> また、Itestが以下のような定義の場合、hogeはどのように設定することになるのでしょうか。

ふつうに、func.hoge=で読み書きできます（関数オブジェクトにも勝手なプロパティを追加できます）。

[tanana_m]

大変参考になりました。ありがとうございます。

>> どうしてこのように使用できるのかがわかりません。
>
>「そういうルールだから」以上の回答を望んでいるのでしょうか？

このドキュメントを読んでこういうルールがあるのだと理解しましたので、ご回答の内容で満足しております。

追加で気になった点が２点ありますので、大変恐れ入りますが可能であればご回答いただけないでしょうか。

1.教えていただいたページに飛ぶとページトップにこのページは改訂されていることが提示され、 [go to the new page]のリンクから飛んだ先のページには私の質問に該当する内容がありませんでした。
この内容は最新版のTypeScriptでも有効であると思っていて問題無いのでしょうか。

2.以下のサンプルコードが私の知りたかった内容を網羅しているのですが、このfunctionの定義をアロー関数に置き換えることはできるのでしょうか。

```ts
interface Counter {
(start: number): string;
interval: number;
reset(): void;
}

function getCounter(): Counter {
let counter = function (start: number) {} as Counter;
counter.interval = 123;
counter.reset = function () {};
return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;
```
自分でもトライしてみたのですが解決できず…。

お手数おかけしますが、お返事いただけると幸いです。
宜しくお願い致します。