Las bases de TypeScript (parte 2): funciones tipadas

Será habitual que mientras programamos en TypeScript necesitemos crear multitud de funciones, por lo que es esencial entender cómo establecer los tipos en los parámetros de entrada y la salida.

Si no conoces los tipos básico de TypeScript, puedes mirar el post anterior para tenerlo un poco más claro.

Cuando declaramos funciones, podemos indicar el tipo tanto de los parámetros de entrada como de la salida que se espera con esta sintaxis:

// Parámetros de entrada num1 y num2, que son de tipo number
// Parámetro de salida indicado como tipo number también
function suma(num1: number, num2: number): number {
  return num1 + num2
}

Cuando una función no devuelve ningún valor, podemos usar la palabra clave void para indicar esta situación:

function imprimirString(valor: string): void {
  console.log(valor)
}

Si no indicamos el tipo de valor que devuelve la función, TypeScript lo inferirá.

En JavaScript tenemos disponibles muchos métodos en objetos como los arrays. Estos métodos son funciones anónimas, y en este caso TypeScript ya sabe qué tipo de parámetro esperar dependiendo de cada caso. Por ejemplo:

const numeros: string[] = ["uno", "dos", "tres"]

// .map es una función anónima
numeros.map((numTexto) => numTexto.toUpperCase())

TypeScript puede inferir que numTexto va a ser un string y que cada iteración va a devolver siempre una cadena de texto.

Si la función recibe como parámetro un objeto, podemos indicar el tipo de las propiedades haciendo lo siguiente:

function generarMapa(coordenadas: { lat: number; lon: number }) {
  console.log(coordenadas.lat)
  console.log(coordenadas.lon)
  // ...
}

generarMapa({ lat: 42.12343, lon: 1.48372904 })

Podemos indicar una propiedad del objeto opcional con el símbolo de interrogación:

function generarMapa(coordenadas: {
  lat: number
  lon: number
  mapa3d?: boolean
}) {
  console.log(coordenadas.lat)
  console.log(coordenadas.lon)
  // ...
}

Haciendo esto, las dos siguientes llamadas a la función son correctas:

generarMapa({ lat: 42.12343, lon: 1.48372904 })
generarMapa({ lat: 42.12343, lon: 1.48372904, mapa3d: false })

Tipos función

Un tipo especial que nos proporciona TypeScript es Function. Podemos indicar que una variable es de este tipo cuando sea necesario que contenga una función.

Veamos este ejemplo:

function multiplica(n1: number, n2: number) {
  return n1 * n2
}

function suma(n1: number, n2: number) {
  return n1 + n2
}

let sumaValores: Function // variable que puede contener una función cualquiera
sumaValores = suma // correcto
sumaValores = multiplica // también correcto, TypeScript no se quejará

Pero para ser más precisos, podemos usar los tipos función:

let sumaValores: (a: number, b: number) => number
let otraFuncion: () => string

Aquí estamos indicando que, en sumaValores guardaremos una función que acepta dos parámetros de tipo number y devuelve otro number. Mientas que en otraFuncion podremos guardar una función sin parámetros de entrada y que devuelva una cadena de texto.

function imprimeAlgo() {
  console.log("algo")
}

function suma(n1: number, n2: number) {
  return n1 + n2
}

let sumaValores: (a: number, b: number) => number
let miFuncion: () => void

sumaValores = suma // correcto
sumaValores = imprimeAlgo // error
miFuncion = imprimeAlgo // correcto

Y hasta aquí la segunda parte de las bases de TypeScript. Ya estamos listos para continuar con la tercera parte, donde veremos cómo nos pueden ayudar las tuplas, los enums, unknown y never.