TypeScriptでパラメータとして強く型付けされた関数は可能ですか?


559

TypeScriptでは、関数のパラメーターを関数型として宣言できます。これを行う「タイプセーフ」な方法はありますか?たとえば、次のことを考慮してください。

class Foo {
    save(callback: Function) : void {
        //Do the save
        var result : number = 42; //We get a number from the save operation
        //Can I at compile-time ensure the callback accepts a single parameter of type number somehow?
        callback(result);
    }
}

var foo = new Foo();
var callback = (result: string) : void => {
    alert(result);
}
foo.save(callback);

保存コールバックはタイプセーフではありません。関数のパラメーターが文字列であるコールバック関数をそれに与えていますが、それに数値を渡しており、エラーなしでコンパイルされます。タイプセーフな関数の保存で結果パラメーターを作成できますか?

TL; DRバージョン:TypeScriptの.NETデリゲートに相当するものはありますか?

回答:


805

承知しました。関数のは、引数の型と戻り型で構成されます。ここでは、callbackパラメーターのタイプが「数値を受け入れてタイプを返す関数」でなければならないことを指定しますany

class Foo {
    save(callback: (n: number) => any) : void {
        callback(42);
    }
}
var foo = new Foo();

var strCallback = (result: string) : void => {
    alert(result);
}
var numCallback = (result: number) : void => {
    alert(result.toString());
}

foo.save(strCallback); // not OK
foo.save(numCallback); // OK

必要に応じて、型エイリアスを定義してこれをカプセル化できます。

type NumberCallback = (n: number) => any;

class Foo {
    // Equivalent
    save(callback: NumberCallback) : void {
        callback(42);
    }
}

6
(n: number) => any関数のシグネチャを意味しますか?
nikk wong 2016

16
@nikkwongこれは、関数が1つのパラメーター(a number)を取ることを意味しますが、戻り値の型はまったく制限されていません(任意の値である可能性があります。void
Daniel Earwicker

16
nこの構文の意味は何ですか?入力と出力のタイプだけでは十分ではないでしょうか?
Yuhuan Jiang

4
インライン関数と名前付き関数の使用の副作用の1つ(以下の回答とこの回答)は、「this」変数が名前付き関数で定義されていないのに対して、インライン関数内で定義されていることです。JavaScriptのコーディング担当者にとっては驚くべきことではありませんが、他のコーディングの背景には明らかではありません。
Stevko 2017年

3
@YuhuanJiang この投稿はあなたの興味を引くかもしれません
Ophidian

93

一般的な.NETデリゲートに相当するTypeScriptは次のとおりです。

interface Action<T>
{
    (item: T): void;
}

interface Func<T,TResult>
{
    (item: T): TResult;
}

2
見るのはおそらく便利ですが、実際にそのようなタイプを使用することはアンチパターンでしょう。とにかく、それらはC#デリゲートよりもJava SAMタイプに似ています。もちろん、そうではありません。これらは、関数に対してよりエレガントなタイプエイリアスフォームに相当します
Aluan Haddad

5
@AluanHaddadは、なぜこれをアンチパターンだと思うのか、詳しく説明してもらえますか?
Max R McCarty

8
その理由は、TypeScriptには、そのようなインターフェイスの必要性を取り除く簡潔な関数型リテラル構文があるためです。C#ではデリゲートは名目ですが、ActionおよびFuncデリゲートはどちらも特定のデリゲート型の必要性のほとんどを取り除き、興味深いことに、C#に構造型の類似性を与えます。これらのデリゲートの欠点は、名前が意味を持たないことですが、他の利点は一般的にこれを上回ります。TypeScriptでは、これらの型は必要ありません。したがって、アンチパターンはになりますfunction map<T, U>(xs: T[], f: Func<T, U>)。好むfunction map<T, U>(xs: T[], f: (x: T) => U)
Aluanハダッド

6
これらはランタイム型を持たない言語の同等の形式であるため、好みの問題です。現在では、インターフェースの代わりにタイプエイリアスを使用することもできます。
Drew Noakes、2017年

18

私はこの投稿が古いことに気づきましたが、要求されたものとは少し異なるよりコンパクトなアプローチがありますが、非常に役立つ代替案になるかもしれません。メソッド(呼び出すときには、基本的にインライン関数を宣言することができますFoosave()この場合は)。次のようになります。

class Foo {
    save(callback: (n: number) => any) : void {
        callback(42)
    }

    multipleCallbacks(firstCallback: (s: string) => void, secondCallback: (b: boolean) => boolean): void {
        firstCallback("hello world")

        let result: boolean = secondCallback(true)
        console.log("Resulting boolean: " + result)
    }
}

var foo = new Foo()

// Single callback example.
// Just like with @RyanCavanaugh's approach, ensure the parameter(s) and return
// types match the declared types above in the `save()` method definition.
foo.save((newNumber: number) => {
    console.log("Some number: " + newNumber)

    // This is optional, since "any" is the declared return type.
    return newNumber
})

// Multiple callbacks example.
// Each call is on a separate line for clarity.
// Note that `firstCallback()` has a void return type, while the second is boolean.
foo.multipleCallbacks(
    (s: string) => {
         console.log("Some string: " + s)
    },
    (b: boolean) => {
        console.log("Some boolean: " + b)
        let result = b && false

        return result
    }
)

このmultipleCallback()アプローチは、ネットワークコールなどの成功または失敗する可能性があるものに対して非常に役立ちます。再びネットワーク呼び出しの例を想定するmultipleCallbacks()と、が呼び出されたときに、成功と失敗の両方の動作を1つの場所で定義できるため、将来のコードリーダーがより明確になります。

一般に、私の経験では、このアプローチは全体的に簡潔で、乱雑さが少なく、より明確になります。

頑張ってください!


16
type FunctionName = (n: inputType) => any;

class ClassName {
    save(callback: FunctionName) : void {
        callback(data);
    }
}

これは確かに関数型プログラミングのパラダイムと一致しています。


6
と呼ぶのでinputTypeはなく、それを呼び出すreturnType必要がありますね。関数にパラメーターを渡すinputTypeタイプはどこですか。datacallback
ChrisW 2018年

はい、@ ChrisW正解です。inputTypeの方が理にかなっています。ありがとう!
クリシュナガネリワール

2

TSでは、次の方法で関数を入力できます。

関数のタイプ/シグネチャ

これは、次の構文を持つ関数/メソッドの実際の実装に使用されます。

(arg1: Arg1type, arg2: Arg2type) : ReturnType

例:

function add(x: number, y: number): number {
    return x + y;
}

class Date {
  setTime(time: number): number {
   // ...
  }

}

関数型リテラル

関数型リテラルは、関数の型を宣言するもう1つの方法です。それらは通常、高次関数の関数シグネチャに適用されます。高階関数は、関数をパラメーターとして受け入れる関数、または関数を返す関数です。構文は次のとおりです。

(arg1: Arg1type, arg2: Arg2type) => ReturnType

例:

type FunctionType1 = (x: string, y: number) => number;

class Foo {
    save(callback: (str: string) => void) {
       // ...
    }

    doStuff(callback: FunctionType1) {
       // ...
    }

}

1

最初に関数タイプを定義すると、次のようになります

type Callback = (n: number) => void;

class Foo {
    save(callback: Callback) : void {        
        callback(42);
    }
}

var foo = new Foo();
var stringCallback = (result: string) : void => {
    console.log(result);
}

var numberCallback = (result: number) : void => {
    console.log(result);
}

foo.save(stringCallback); //--will be showing error
foo.save(numberCallback);

単純なプロパティ構文を使用して関数タイプを指定しない場合は、次のようになります。

class Foo {
    save(callback: (n: number) => void) : void {        
        callback(42);
    }
}

var foo = new Foo();
var stringCallback = (result: string) : void => {
    console.log(result);
}

var numberCallback = (result: number) : void => {
    console.log(result);
}

foo.save(stringCallback); //--will be showing error
foo.save(numberCallback);

C#ジェネリックデリゲートのようなインターフェイス関数を使用する場合は、次のようになります。

interface CallBackFunc<T, U>
{
    (input:T): U;
};

class Foo {
    save(callback: CallBackFunc<number,void>) : void {        
        callback(42);
    }
}

var foo = new Foo();
var stringCallback = (result: string) : void => {
    console.log(result);
}

var numberCallback = (result: number) : void => {
    console.log(result);
}

let strCBObj:CallBackFunc<string,void> = stringCallback;
let numberCBObj:CallBackFunc<number,void> = numberCallback;

foo.save(strCBObj); //--will be showing error
foo.save(numberCBObj);

0

他の人が言ったことに加えて、共通の問題は、オーバーロードされる同じ関数の型を宣言することです。典型的なケースは、複数の種類のリスナーを受け入れるEventEmitter on()メソッドです。同様のことが起こる可能性があるのは、reduxアクションを操作するときに、アクションタイプをリテラルとして使用してオーバーロードをマークします。EventEmittersの場合は、イベント名リテラルタイプを使用します。

interface MyEmitter extends EventEmitter {
  on(name:'click', l: ClickListener):void
  on(name:'move', l: MoveListener):void
  on(name:'die', l: DieListener):void
  //and a generic one
  on(name:string, l:(...a:any[])=>any):void
}

type ClickListener = (e:ClickEvent)=>void
type MoveListener = (e:MoveEvent)=>void
... etc

// will type check the correct listener when writing something like:
myEmitter.on('click', e=>...<--- autocompletion
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.