Funciones escritas como parámetros de función en TypeScript

Shuvayan Ghosh Dastidar 21 junio 2023
  1. Usar devoluciones de llamada escritas en funciones en TypeScript
  2. Funciones escritas como parámetros usando la interfaz en TypeScript
Funciones escritas como parámetros de función en TypeScript

En TypeScript, junto con diferentes variables que consisten en diferentes tipos, las funciones fuertemente y débilmente tipadas también se pueden pasar como parámetros de función en otras funciones.

Esto se debe al paradigma de programación funcional de JavaScript en el que se pueden pasar diferentes funciones como parámetros de otras funciones, y TypeScript garantiza que esas funciones se escriban. Este tutorial demostrará cómo usar funciones escritas como parámetros de función.

Usar devoluciones de llamada escritas en funciones en TypeScript

Se pueden usar diferentes tipos de devoluciones de llamada escritas en las definiciones de funciones. Las devoluciones de llamada pueden tener diferentes tipos y actuar como parámetros para diferentes funciones.

El siguiente bloque de código muestra una demostración de esto.

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

Producción :

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

Lo anterior muestra cómo las funciones tipeadas se pueden usar como parámetros de función de otras funciones. La clase Compute tiene la función compute, que recibe una devolución de llamada del tipo LogFunction y llama a la devolución de llamada después de algún cálculo.

Se puede usar cualquier implementación de la devolución de llamada mientras se llama a la función computar. Para esta implementación, se utiliza showLogMessage para implementar la interfaz LogFunction.

Funciones escritas como parámetros usando la interfaz en TypeScript

Las funciones pasadas como parámetros a diferentes funciones pueden tener los tipos definidos en la definición de la función, o se puede usar una interfaz para definir el tipo de la función.

Los siguientes bloques de código mostrarán diferentes tipos de escritura que se pueden lograr al pasar funciones como parámetros en otras funciones.

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

Producción :

"Dog"
"Bark"

El ejemplo anterior muestra la definición de tipo in situ de la función de devolución de llamada hablar que se pasa a la función showInfo. La función hablar también puede tener una interfaz como definición.

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

Producción :

"Cat"
"Meow"

Por lo tanto, lo anterior muestra la implementación de la función escrita usando una interfaz.

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

Artículo relacionado - TypeScript Function