Typescriptインターフェイス関数

これは、Typescriptインターフェイス内で関数型を宣言する方法です。この記事を書いたのは、混乱している情報のためであり、Typescriptのドキュメントは構文について直接ではありません。

（関数型は特に有用であるため、次の例ではTypescript Reactクラスを例としてのみ使用していますが、構文は任意のTypescriptインターフェイスに適用されます。)

例1:引数を取らず、値を返さない関数:

以下の例ではonChangeは関数宣言です。この関数はnothing（void）を返すので、戻り値の型をanyとして宣言します。これは、voidとneverが異なるコンテキストで異なる評価されるためです（この記事の範囲を超えて）。 (以下は型指定された戻り値の例です。)

interface MyClassProps {
someProp: string;
onChange(): any;
}class MyClass extends React.Component<MyClassProps, MyClassState> ...

引数名とその型を含めます。引数名は必須ですが、実際の関数をインスタンス化するときに一致する必要はありませんが、型は一致する必要があります。それはTypescriptのすべてのものと同じように型付けされたアヒルです。p>

interface MyClassProps {
anotherProp: number;
onChange(name: string): any;
}

この関数は、引数として文字列を受け取り、数値を返します。

interface MyClassProps {
onChange(name: string): number;
}

オプションの演算子??を置きます。 TypeScript Reactでは、オプションの演算子を使用しない限り、すべての小道具が必要です。 Reactの必須ではない小道具と同様に、小道具がundefinedかどうかを確認する必要がありますそれを使用する前に。

interface MyClassProps {
onChange?(name: string): number;
niceProp: boolean;
}

関数の型を最初に宣言してから、インターフェイスで型を使用すると便利な場合があります。関数を型として宣言するには、構文が少し異なります。矢印演算子を使用します。p>

type MyFunctionType = (name: string) => number;interface MyClassProps {
onChange: MyFunctionType;
niceProp: string;
}

お楽しみください。