TypeScript の関数パラメーターとしての型付き関数

Shuvayan Ghosh Dastidar 2023年6月21日
  1. TypeScript の関数で型指定されたコールバックを使用する
  2. TypeScript のインターフェイスを使用したパラメーターとしての型付き関数
TypeScript の関数パラメーターとしての型付き関数

TypeScript では、さまざまな型で構成されるさまざまな変数とともに、強く型付けされた関数と弱く型付けされた関数を、他の関数の関数パラメーターとして渡すこともできます。

これは、さまざまな関数を他の関数のパラメーターとして渡すことができる JavaScript の関数型プログラミング パラダイムによるものであり、TypeScript はそれらの関数が型付けされていることを保証します。 このチュートリアルでは、型指定された関数を関数パラメーターとして使用する方法を示します。

TypeScript の関数で型指定されたコールバックを使用する

関数定義では、さまざまな種類の型付きコールバックを使用できます。 コールバックはさまざまなタイプを持つことができ、さまざまな関数のパラメーターとして機能します。

次のコード ブロックは、このデモを示しています。

enum LogLevel {
    DEBUG,
    INFO,
    DANGER
}

interface LogFunction {
    (message : string, level? : LogLevel) : void
}

function showLogMessage(message : string, level : LogLevel = 5) {
    switch(level){
        case LogLevel.INFO:
            console.info("Message : " , message);
            break;
        case LogLevel.DEBUG:
            console.debug("Message : " , message);
            break;
        case LogLevel.DANGER:
            console.error("Message : " , message);
            break;
        default :
            console.log("Message : " , message);
    }
}

class Compute {
    compute(callback :LogFunction) {
        // Some Computation
        var a = 5 + 6;
        callback('Computed value of a : ' + a);
    }
}

var computeObj = new Compute();
computeObj.compute(showLogMessage);

出力:

"Message : ",  "Computed value of a : 11"

上記は、型付き関数を他の関数の関数パラメーターとして使用する方法を示しています。 Compute クラスには compute 関数があり、LogFunction 型の callback を受け取り、何らかの計算の後にコールバックを呼び出します。

関数 compute を呼び出すときに、callback の任意の実装を使用できます。 この実装では、showLogMessage を使用してインターフェース LogFunction を実装します。

TypeScript のインターフェイスを使用したパラメーターとしての型付き関数

さまざまな関数にパラメーターとして渡される関数は、関数定義で定義された型を持つことができます。または、インターフェイスを使用して関数の型を定義することもできます。

次のコード ブロックは、関数を他の関数のパラメーターとして渡すときに実行できるさまざまなタイプの型付けを示しています。

class Animal {

    name : string;

    constructor( name : string){
        this.name = name;
    }

    showInfo(speak : () => void){
        console.log(this.name);
        speak();
    }
}

var dog = new Animal('Dog');
dog.showInfo(() => console.log("Bark"));

出力:

"Dog"
"Bark"

上記の例は、showInfo 関数に渡された speak コールバック関数のインプレース型定義を示しています。 speak 関数は、その定義としてインターフェイスを持つこともできます。

interface SpeakCallBackFn {
    () : void
}


class Animal {

    name : string;

    constructor( name : string){
        this.name = name;
    }

    showInfo(speak : SpeakCallBackFn){
        console.log(this.name);
        speak();
    }
}

var cat = new Animal('Cat');
cat.showInfo(() => console.log("Meow"));

出力:

"Cat"
"Meow"

したがって、上記はインターフェイスを使用して型指定された関数の実装を示しています。

Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

関連記事 - TypeScript Function