Fundamentos de TypeScript 🦆| #11: Type Function

TypeScript tiene un tipo muy interesante que es ridículamente útil. Este tipo es Function (con mayúscula). Pero, ¿para qué nos sirve este tipo de dato?

Function indica a una variable que está solo puede contener una referencia a una funcion, caso contrario arroja un hermoso error.

Veamos un ejemplo:

const filtrarNombres = (arr:string[]):string[] => {
  return arr.filter((item) => item === "Carlos" || item === "Susana")
}

const nombres = ["Carlos", "Juan", "Pedro", "Susana", "Camilo"]
let resultado = filtrarNombres(nombres);
console.log(resultado) // ["Carlos", "Susana"]

La función filtrarNombres regresa solo a mis amigos que tengan por nombre "Carlos" o "Susana". Muy fácil. Esta salida la almacenamos en la variable resultado para luego mostrarla por consola.

Pero que pasa si antes de imprimir el resultado cambiamos su valor:

const filtrarNombres = (arr:string[]):string[] => {
  return arr.filter((item) => item === "Carlos" || item === "Susana")
}

const nombres = ["Carlos", "Juan", "Pedro", "Susana", "Camilo"]
let resultado = filtrarNombres(nombres);
resultado = ["Hola mundo"];
console.log(resultado); // ["Hola mundo"]

Ahora la función se contaminó, y no regresa lo que yo esperaba.

Podemos arreglar este problema haciendo que la variable resultado solo pueda recibir una referencia a una función.

const filtrarNombres = (arr:string[]):string[] => {
  return arr.filter((item) => item === "Carlos" || item === "Susana")
}

const nombres = ["Carlos", "Juan", "Pedro", "Susana", "Camilo"]
let resultado: Function;
resultado = filtrarNombres;
console.log(resultado(nombres)); // ["Carlos", "Susana"]

Ahora resultado es una variable que solo puede almacenar una función, esto hace que el código sea menos susceptible a errores y bugs.
Si intentamos guardar algo que no sea una función en resultado obtendremos un error.

Esta implementación es buena, pero aún tiene un problema, resultado aceptará cualquier función.

const filtrarNombres = (arr:string[]):string[] => {
  return arr.filter((item) => item === "Carlos" || item === "Susana")
}

const saludo = () => console.log("Hola mundo")

const nombres = ["Carlos", "Juan", "Pedro", "Susana", "Camilo"]
let resultado: Function;
resultado = saludo;
console.log(resultado(nombres)); // "Hola mundo"

Es posible guardar la función saludo en resultado puesto que es una función común y corriente, pero esto mancha nuestro programa nuevamente porque ya no obtenemos lo que esperábamos.

Para poder pulir este codigo un poco mas podemos especificar mas concretamente las características que debe tener las funciones que puede aceptar resultado indicando al programa cuantos parámetros debe tener, el tipo de dato de estos parámetros y su tipo de regreso:

En vez de esto

let resultado: Function;

Hacemos esto

let resultado: (arreglo:string[]) => string[]

Ahora resultado solo recibirá funciones que tengan exactamente un parámetro, dicho parámetro debe ser si o si un arreglo de strings y finalmente la función debe regresar otro arreglo de strings. Ahora todo está mucho más claro y específico.

Ya no es posible guardar saludo en resultado por que no cumple con ninguna de las restricciones que le pusimos.

El código final se veria de la siguiente manera:

const filtrarNombres = (arr:string[]):string[] => {
  return arr.filter((item) => item === "Carlos" || item === "Susana")
}

const saludo = () => console.log("Hola mundo")

const nombres = ["Carlos", "Juan", "Pedro", "Susana", "Camilo"]
let resultado: (arreglo:string[]) => string[]
resultado = filtrarNombres;
console.log(resultado(nombres)); // ["Carlos", "Susana"]

Conclusiones

• El Type Function es super útil para restringir que una variable solo puede almacenar funciones.
• Podemos usar el tipo Function para lograr esto, pero la desventaja es que es muy general y nuestras variables podrán soportar cualquier tipo de función.
• Podemos declarar el tipo de la función en concreto para indicarle la cantidad de parámetros, sus tipos de datos y su valor de retorno. En otras palabras como si le pusiéramos un candado a la variable para que solo reciba funciones concretas y específicas.

Referencias