Typisierte Funktionen als Funktionsparameter in TypeScript

  1. Verwenden Sie typisierte Rückrufe in Funktionen in TypeScript
  2. Typisierte Funktionen als Parameter unter Verwendung der Schnittstelle in TypeScript
Typisierte Funktionen als Funktionsparameter in TypeScript

In TypeScript können neben verschiedenen Variablen unterschiedlichen Typs auch stark und schwach typisierte Funktionen als Funktionsparameter an andere Funktionen übergeben werden.

Dies liegt an dem funktionalen Programmierparadigma von JavaScript, dass verschiedene Funktionen als Parameter an andere Funktionen übergeben werden können, wobei TypeScript sicherstellt, dass diese Funktionen eingegeben werden. Dieses Tutorial zeigt, wie typisierte Funktionen als Funktionsparameter verwendet werden.

Verwenden Sie typisierte Rückrufe in Funktionen in TypeScript

In Funktionsdefinitionen können verschiedene Arten von typisierten Callbacks verwendet werden. Die Callbacks können unterschiedliche Typen haben und als Parameter für unterschiedliche Funktionen fungieren.

Der folgende Codeblock zeigt eine Demonstration davon.

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);

Ausgang:

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

Das Obige zeigt, wie typisierte Funktionen als Funktionsparameter anderer Funktionen verwendet werden können. Die Klasse Compute hat die Funktion compute, die einen callback vom Typ LogFunction entgegennimmt und den Callback nach einiger Berechnung aufruft.

Beim Aufruf der Funktion compute kann jede Implementierung des callback verwendet werden. Für diese Implementierung wird showLogMessage verwendet, um die Schnittstelle LogFunction zu implementieren.

Typisierte Funktionen als Parameter unter Verwendung der Schnittstelle in TypeScript

Die als Parameter an verschiedene Funktionen übergebenen Funktionen können die in der Funktionsdefinition definierten Typen haben, oder es kann eine Schnittstelle verwendet werden, um den Typ der Funktion zu definieren.

Die folgenden Codeblöcke zeigen verschiedene Arten der Typisierung, die erreicht werden können, während Funktionen als Parameter in anderen Funktionen übergeben werden.

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"));

Ausgang:

"Dog"
"Bark"

Das obige Beispiel zeigt die Inplace-Typdefinition der Callback-Funktion speak, die an die Funktion showInfo übergeben wird. Die Funktion Sprechen kann auch eine Schnittstelle als Definition haben.

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"));

Ausgang:

"Cat"
"Meow"

Somit zeigt das obige die Implementierung der unter Verwendung einer Schnittstelle typisierten Funktion.

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

Verwandter Artikel - TypeScript Function