Funciones en TypeScript
Gracias a TypeScript, es posible recibir y retornar variables con tipo en las funciones. Ya vimos en un anterior artículo cómo definir variables en TypeScript. En este post, vamos a ir un poco más allá y ver su uso en funciones.
Número de argumentos
En primer lugar y antes de entrar de lleno con los tipos, veamos que en TypeScript aún cuando no se defina un tipo para los parámetros y un valor de retono, habrá comprobación del número de argumentos pasados a una función.
function sum(a, b)
{
return a + b;
}
sum(6);
El código anterior lanzará el siguiente error en el compilador por llamar a la funcion solo con un tipo cuando se requieren dos.
error TS2554: Expected 2 arguments, but got 1.
Argumentos de función
En TypeScript es posible declarar una función con el tipo de sus parámetros. Observa el siguiente ejemplo en donde hemos definido un parámetro de tipo string.
function printName(userName: string)
{
return 'Hello ' + userName;
}Es posible incluso, definir en la signature de la función un parámetro más complejo como una estructura. En el siguiente ejemplo paámetro debe ser un objeto que tenga definidos los atributos name y age.
interface User {
name: string,
age: number
}
function printName(userName: User): string {
return 'Hello ' + userName.name;
}Valores de retorno
También es posible definir cuál tipo debe devolver una función en TypeScript.
function printName(userName: string): string
{
return 'Hello ' + userName;
}Es posible incluso, definir en la signature de la función un valor de retorno más complejo como una estructura. En el siguiente ejemplo el valor de retorno debe ser un objeto que tenga definidos los atributos saludo y userName.
function printName(userName: string): {
saludo: string,
userName: string
} {
return {
'saludo': 'Hello',
'userName': userName
};
}Incluso, el valor de retorno podría ser una Interfaz (Puedes ver más sobre interfaces en Interfaces en TypeScript).
interface User {
saludo: string,
userName: string
}
function printName(userName: string): User {
return {
'saludo': 'Hello',
'userName': userName
};
}