web-dev-qa-db-ja.com

TypeScriptコールバックタイプの定義

TypeScriptには次のクラスがあります。

class CallbackTest
{
    public myCallback;

    public doWork(): void
    {
        //doing some work...
        this.myCallback(); //calling callback
    }
}

私はこのようなクラスを使用しています：

var test = new CallbackTest();
test.myCallback = () => alert("done");
test.doWork();

コードは機能するため、期待どおりにメッセージボックスが表示されます。

私の質問は、クラスフィールドmyCallbackに提供できる型はありますか？現在、パブリックフィールドmyCallbackは、上記のようにタイプanyです。コールバックのメソッドシグネチャを定義するにはどうすればよいですか？または、タイプをコールバックタイプに設定することはできますか？または、これらのネザーを実行できますか？ any（暗黙/明示）を使用する必要がありますか？

私はこのようなことを試みましたが、うまくいきませんでした（コンパイル時エラー）：

public myCallback: ();
// or:
public myCallback: function;

このオンラインの説明を見つけることができませんでした。

typescallbacktypescript
129
nikeee

TypeScript言語仕様で何かを見つけましたが、それはかなり簡単です。私はかなり近かった。

構文は次のとおりです。

public myCallback: (name: type) => returntype;

私の例では、

class CallbackTest
{
    public myCallback: () => void;

    public doWork(): void
    {
        //doing some work...
        this.myCallback(); //calling callback
    }
}
172
nikeee

さらに一歩進むには、次のような関数シグネチャへの型ポインタを宣言できます。

interface myCallbackType { (myArgument: string): void }

次のように使用します：

public myCallback : myCallbackType;
126
Leng

新しい型を宣言できます：

declare type MyHandler = (myArgument: string) => void;

var handler: MyHandler;

更新。

declareキーワードは必要ありません。 .d.tsファイルなどで使用する必要があります。

47
TSV

以下に例を示します-パラメーターを受け入れず、何も返しません。

class CallbackTest
{
    public myCallback: {(): void;};

    public doWork(): void
    {
        //doing some work...
        this.myCallback(); //calling callback
    }
}

var test = new CallbackTest();
test.myCallback = () => alert("done");
test.doWork();

パラメーターを受け入れたい場合は、それも追加できます。

public myCallback: {(msg: string): void;};

また、値を返したい場合は、それも追加できます：

public myCallback: {(msg: string): number;};
27
Fenton

汎用関数が必要な場合は、次を使用できます。それはどこにも文書化されていないようです。

class CallbackTest {
  myCallback: Function;
}
7
Ash Blue

イベントリスナーにコールバックを追加しようとすると、同じエラーが発生しました。奇妙なことに、コールバックタイプをEventListenerに設定することで解決しました。関数シグネチャ全体を型として定義するよりもエレガントに見えますが、これが正しい方法であるかどうかはわかりません。

class driving {
    // the answer from this post - this works
    // private callback: () => void; 

    // this also works!
    private callback:EventListener;

    constructor(){
        this.callback = () => this.startJump();
        window.addEventListener("keydown", this.callback);
    }

    startJump():void {
        console.log("jump!");
        window.removeEventListener("keydown", this.callback);
    }
}
1
Kokodoko

以下を使用できます。

  1. 型エイリアス（typeキーワードを使用、関数リテラルのエイリアス）
  2. インタフェース
  3. 関数リテラル

それらの使用方法の例を次に示します。

type myCallbackType = (arg1: string, arg2: boolean) => number;

interface myCallbackInterface { (arg1: string, arg2: boolean): number };

class CallbackTest
{
    // ...

    public myCallback2: myCallbackType;
    public myCallback3: myCallbackInterface;
    public myCallback1: (arg1: string, arg2: boolean) => number;

    // ...

}
0
Willem van der Veen