Las funciones en TypeScript

TypeScript entiende el tipo de retorno de las funciones por defecto. Por ejemplo, en el siguiente caso, el compilador infiere que una retorna un valor booleano y la otra es de tipo void.

function Auth() {
  return true
}
 
function Auth() {
  console.log("hello")
}

Usando tipos de retorno

TypeScript nos permite definir tipos primitivos o tipos personalizados en la firma de una función para su valor de retorno. Para asignar el tipo, usamos dos puntos : al final de los parámetros.

Al especificar la firma, le indicamos al compilador que debe validar el tipo de dato que devuelve la función.

function authenticateUser(user: User): boolean {
  return true
}

El tipo void

Usamos el tipo void cuando una función no retorna ningún valor, tal como en el siguiente ejemplo:

function logMessage(): void {
  console.log("message completed.")
}

Usar una función como tipo

El tipo Function en TypeScript es muy útil cuando necesitamos cambiar acciones o comportamientos en nuestro código.

Por ejemplo, imaginemos que tenemos una clase de autenticación con una propiedad onComplete de tipo Function.

La propiedad onComplete es de tipo función y tiene un procedimiento interno para mostrar un mensaje. El proceso de login devuelve un valor y luego ejecuta onComplete.

export default class Authentication {
    public onComplete: Function = this.greetingUser;
    private referralUrl: string = "/home";
    constructor() {}
    private greetingUser(url: string): void {
        console.log(`Thanks! go to ${this.referralUrl}`);
    }
    loginProcess(user: string, password: string) {
        if (user == "dany" && password == "1234") {
            return this.referralUrl;
        }
    }
}
 

Ahora importamos Authentication y la usamos, asignándole otra función a la propiedad onComplete:

import Authentication from "./Authentication"
 
class App {
  userLogin(name: string, password: string) {
    let auth = new Authentication()
    auth.onComplete = this.googleSignIn
    auth.onComplete(auth.loginProcess(name, password))
  }
 
  googleSignIn(url: string): void {
    console.log(`Please go to  ${url}`)
  }
 
  appleSignIn(user: string, role: string): void {
    console.log(`Hello ${user} , your ${role}`)
  }
}
 
const app = new App()
 
app.userLogin("dany", "1234")

[nodemon] starting `node .\app.js`
Please go to  /home
 

La función userLogin ejecuta el código, llama a la función callback onComplete y todo funciona correctamente.

Si observamos el código, la función googleSignIn recibe el parámetro devuelto por loginProcess.

El retorno de Authentication devuelve un solo parámetro. ¿Qué pasa si asignamos una función que espera dos parámetros, como appleSignIn?

[nodemon] starting `node .\app.js`
Hello /home, your undefined
 

¡Problema a la vista! El tipo genérico Function solo verifica que el valor sea una función, pero no valida el número de parámetros ni el tipo de retorno.

Para solucionarlo y obligar a que se asigne una función que cumpla con la firma y el tipo de retorno, usamos una función flecha como tipo.

Cambiamos el tipo Function por una función flecha con el tipo de retorno correspondiente. Otra excelente solución, si no quieres escribir la función flecha directamente en la definición de la clase, es crear tu propio tipo con un type alias como OnCompleteAction:

type OnCompleteAction = (name: string) => void;
export default class Authentication {
    public onComplete: OnCompleteAction = this.greetingUser;
    private referralUrl: string = "/home";
    constructor() {}
    private greetingUser(): void {
        console.log(`Thanks! go to ${this.referralUrl}`);
    }
    loginProcess(user: string, password: string): string {
        if (user === "dany" && password === "1234") {
            return this.referralUrl;
        }
        return "no access";
    }
}
 

Con estos cambios, el compilador obliga a que cualquier función asignada cumpla de forma estricta con los parámetros esperados.

Espero que este artículo te sirva de ayuda para entender cómo usar funciones como tipos y definir tipos de retorno en TypeScript. Si te gustó este post, compártelo.

Foto de Claudio Guglieri en Unsplash