Un problema muy común en Javascript vanilla es el saber de qué tipo van a ser los parámetros de una función. Por ejemplo, viendo esta función, a priori NO sabes si a y b son números o strings, ya que los strings se concatenan usando también el símbolo del más.

function add(a, b) {
	return a;
}

Esto hay gente que lo arregla poniendo un comentario, añadiendo JSDoc 🚧 a la función o cambiando el nombre de la función a addString o addNumber, son soluciones sí, pero con Typescript este problema desaparece de una forma más elegante.

Cómo tipar los parámetros de las funciones y su salida

La sintaxis para tipar los parámetros de entrada es la misma que ya conoces de los dos puntos que ya vimos en Los tipos básicos de Typescript.

function add(a: number, b: number) {
	return a + b;
}

Incluso se puede tipar el valor devuelto, así tanto las entradas como las salidas de las funciones quedan cubiertas con tipos y se evitan errores. Para hacerlo simplemente usa los dos puntos tras los paréntesis de la declaración de los parámetros de entrada.

function add(a: number, b: number): number {
	return a + b;
}

Esto de declarar el tipo devuelto de las funciones es especialmente útil porque Typescript te va a avisar en caso de que se te olvide poner el return de la función, o en caso de que una función grande con varias ramas devuelva algo que no corresponde con el tipo que has indicado. Además ayuda a la hora de usar las funciones, ya que sabes el tipo del valor devuelto.

Typescript tiene inferencia de tipos y al declarar variables con valores por defecto no vas a necesitar poner el tipo explícitamente, pero para las entradas y las salidas de las funciones sí que es especialmente útil poner el tipo, ya que pasa el problema que hemos visto antes, Typescript a priori no puede determinar si en la función add los parámetros son números o strings.

En caso de que una función no devuelva nada, también lo puedes indicar con el tipo void:

function updateCell(text: string): void {
	const domElement = document.querySelector("#cell");
	domElement.innerHTML = text;
}

También puedes tipar cada parámetro usando el nombre del tipo o de la interface. Echa un ojo a los Type alias en Typescript y las Interfaces en Typescript si no sabes de lo que hablo.

function isUserAdult(user: User): void {
	return user.age >= 18;
}

Parámetros opcionales

Como pasa con el Tipado de Objetos en Typescript, que por cierto también puedes usarlo para la tipar las funciones, para declarar un parámetro como opcional tan solo tienes que poner la interrogación cerrada delante de los puntos del parámetro que quieres que sea opcional, ejemplo:

function multiply(a: number, b: number, c?: number): number {
	return a * b * c;
}

En el ejemplo anterior el parámetro c es opcional, al usar esta función puedes pasarlo o no. Pero ojo, al ser opcional Typescript no te cubre en el caso en el que no lo pases, esa comprobación la tienes que seguir haciendo a mano, es decir:

function multiply(a: number, b: number, c?: number): number {
  if (typeof c !== 'undefined') {
    return a * b * c;
  }
  return a * b;
}