Retorno de funciones

Clase 18 de 24 • Curso de TypeScript

Contenido del curso

Introducción a TypeScript

Tipos de datos primitivos

Tipos de datos especiales

Próximos pasos

24
Toma el Curso de Tipos Avanzados y Funciones en TypeScript
01:01 min

Tomar examen

Resumen

En TypeScript podemos especificar el tipo de dato del valor que nos retornará una función o indicar si no se devolverá dato alguno:

Retornos tipados en TypeScript

El tipo de retorno se especificará después de los paréntesis en los que se encuentran los argumentos de la función:

Void: funciones sin retorno Este tipo de función ejecuta ciertas instrucciones, pero no devuelve dato alguno. Estas son conocidas como funciones de tipo void. Se definen así:

//TypeScript
function imprimirNombre(yourName: string): void {
    console.log(`Hello ${yourName}`);
}

Funciones con retorno Por el contrario, si en la función devolveremos algún valor, podemos especificar el tipo de dato de este:

//TypeScript
function suma(a: number, b: number): number {
    return a + b;
}

function holaMundo(): string {
    return "Hello, World!";
}

También los retornos pueden ser más de un tipo de dato:

//TypeScript
function devolverMayor(a: number, b: number): number | string {
    if(a > b){
        // Retorna un número
        return a;
    } else if( b > a ) {
        // Retorna un número
        return b;
    } else {
        // Retorna un string
        return `Los números ${a} y ${b} son iguales`;
    }
}

TypeScript también lo infiere

Si no indicamos en nuestra declaración de la función el tipado del retorno, TypeScript, al igual que con las variables, lo puede inferir según si retornas datos (sea string, number, etc.) o si nada es devuelto (tipo void).

Contribución creada por: Martín Álvarez.

Comentarios

Irving Juárez

student•

Resumen de la clase

En TS podemos especificar que tipo de dato retorna la función e incluso podemos indicar cuando esa funcion no retorna nada.

// Retornando un string
function joinName(fName: string, lName: string): string {
 return `${fName} ${lName}`
}

// Funcion sin retorno
function printName(name: string): void {
  console.log(name)
}

Reinaldo Mendoza

student•

El curso de manipulacion de arrays es buenisimo, lo uso de referencia seguido

Stiven Trujillo

student•

cual es?

Jorge Winder Avila

student•

https://platzi.com/cursos/arrays/#_=_

Kamila villablanca

student•

Lo mismo pero con el método reduce:

  const calcTotal = (prices: number[]): number => {
    return prices.reduce((total, price) => total + price, 0);
  };
  console.log(calcTotal([10, 20, 30])); // 60

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes. :D

Void

Normalmente, lo usamos para funciones de efecto secundario, funciones que llaman a otras funciones.

Lo utilizamos para funciones que no tengan un retorno, que no retornen ningún tipo de valor.

Sintaxis tipo explícito

Funciones declarativas

function functionName (parameters: dataTypes): dataTypes { statements }

Arrow functions

const functionName = (parameters: dataTypes): dataTypes => { statements }

Código de la clase

(() => {
    const calcTotal = (prices: number[]): string => {
        let total = 0;
        prices.forEach(item => total += item);
        return total.toString();
    }

    // const rta = calcTotal([1, 2, 1, 1, 1]);
    // console.log(rta);

    const printTotal = (prices: number[]): void => {
        const rta = calcTotal(prices);
        console.log(`El total es ${rta}`);
    }

    const rta = printTotal([1, 2, 1, 1, 1]);
})();

Federico Ivan Llano

student•

Gracias, no entendia los void, pero mirando la clase y leyendo ahora si.

Carlos Eduardo Plasencia Prado

student•

Esta super interesante esto del tipo de dato que queremos retornar en una funcion, entonces podemos decirle a una función que retorne algún Literal Types de esta manera:

  type SizeTshirt = "M" | "L" | "XG" | "S";
  type User = { name: string; user: string; size: SizeTshirt };

  const greeting = (user: string, name: string, size: SizeTshirt): User => {
    return {
      user,
      name,
      size,
    };
  };

Juan Manuel Calderón Robles

student•

Aqui esta la url del github en la rama de esta clase: https://github.com/platzi/curso-typescript-fundamentos/tree/16-step

Rodrigo Andrés Moreno Pertúz

student•

Esta interesante el curso :D

  const calcTotal =(prices: number[])=> {
    let total = 0;
    total = prices.reduce((e,i)=>e+i);
    console.log(`El total es: ${total}`); 
    return total;
  };

  const Nguardado = calcTotal([12,34,31,4,134])
  console.log(Nguardado+1);

Roberto López

student•

Otras soluciones alternativas

Fernando Vela Vargas

student•

Ejercicio de la clase:

(() => {
  const calcTotal = (prices: number[]): string => {
    let total = 0;
    prices.forEach((item) => {
      total += item;
    });
    return total.toString();
  }

  const printTotal = (prices: number[]): void => {
    const rta = calcTotal(prices);
    console.log(`El total es ${rta}`);
  }

  printTotal([1, 2, 3, 5, 6]);
})();

Sneyder Barreto

student•

💡 Un dato interesante es que en JavaScript las funciones que no retornan un valor, implícitamente retortan undefined. Sin embargo, void y undefined no son lo mismo en TypeScript como hemos podido ver en las clases de este curso.

David Jordan Amaya

student•

aquí las tengo :v

Juan Cortes

student•

Tengo una función que recibe como parámetros un array de números y un callback (en este caso que suma los números del array) y quiero que retorne un número. Hay alguna forma de verificar que la función que recibo como callback, retorne también un número?

const calcTotalString = (prices: number[]): string => {
    return prices
      .reduce((previousPrice, currentPRice) => previousPrice + currentPRice)
      .toString();
  };

  const printAny = (data: number[], callback: Function): number => {
    const ret: number = callback(data);
    return ret;
  };

  const prices = [2, 2, 2];
  console.log(printAny(prices, calcTotalString));

Se supone que el return de la función printAny es de tipo number, pero con este callback que estoy enviando es de tipo string y no existe ningun error por esto, existe la manera de manejar esto?

Nicolas Molina

teacher•

Hola, que gran ejemplo y además muy útil hay varias formas, pero una que me parece sencilla sería tipar como esperas que sea llamada la función y usas ese tipo tanto en la función como cuando recibes el callback, así 👇🏻

type callback = (prices: number[]) => string;

const calcTotalString: callback = (prices: number[]): string => {
  return prices
    .reduce((previousPrice, currentPRice) => previousPrice + currentPRice)
    .toString();
};

const printAny = (data: number[], callback: callback) => {
  const ret = callback(data);
  return ret;
};

const prices = [2, 2, 2];
console.log(printAny(prices, calcTotalString));

Hay otra forma más flexible usando los Generics, pero eso lo vemos en el Curso de TypeScript: Programación Orientada a Objetos y Asincronismo

Víctor Andrés Córdova Poma

student•

Para quien pensó en como hacer un clousure con Typescript esto te puede servir. Este aporte fue posible gracias al curso profesional de Javascript.

function newClousure (a: number): (b: number) => number {

  return function(b) {
    return a + b;
  }
}

Con arrow functions

const newClousure = (a: number): (b: number, c: string) => number => {
  return (b, c) => {
    return 5;
  }
}

Jhon Acevedo Lema

student•

Detalle interesante El método .toString() no solo convierte el número a texto, también permite cambiar la base en la que se representa el número.

Por ejemplo:

total.toString(2) → devuelve el número en binario
total.toString(10) → devuelve el número en decimal (es el valor por defecto si no ponemos nada)
total.toString(16) → devuelve el número en hexadecimal

Gustavo Pú

student•

❤️|

Edgar Meneses

student•

Como le menciono Nico podemos usar el reduce para hacerlo de una manera mas elegante les dejo el código que desarrolle usando el reduce adicionalmente al usar arrow functions si nuestra función solo realiza una acción podemos escribir una sola linea de código evitando poner las llaves {} después de definir la función

(() => {
  const calTotal = (prices:  number[]): string =>
   prices.reduce((sum, price) => sum + price)
   .toString();

   const printTotal = (prices: number[]): void =>
   console.log(calTotal(prices));

   printTotal([1,2,3]);

})();

Gustavo Adolfo Silva Alarcón

student•

La inferencia de tipo no funciona tambien con el dato retornado? Estoy probando la funcion devolverMayor() que aparece en los recursos pero aunque con la ultima condicion retorna un string, no puedo utilzar la funciones de un string, tampoco en la condicion donde retorna un number, puedo utilizar funciones de un number.

Geordy Elian Reyes Mendoza

student•

Tiene un significado "rta"? Veo que lo usa el profe seguido

Fernando Orozco Velasquez

student•

Es respuesta abreviado nada mas

Dairo Javier Carrillo Aranda

student•

Hay alguna diferencia en la definición de una función con la key word "funtion" o definirla como en el ejemplo? Con una asignación?

Nicolas Molina

teacher•

Hola, no hay diferencia, lo puedes hacer de las 2 maneras y es igual

const calcTotal = (prices: number[]): string => {
    let total = 0;
    prices.forEach((item)=> {
      total += item;
    });
    return total.toString();
  }

puede ser

function calcTotal (prices: number[]): string {
    let total = 0;
    prices.forEach((item)=> {
      total += item;
    });
    return total.toString();
  }

Dairo Javier Carrillo Aranda

student•

Gracias!!

Orlando Leyva acosta

student•

¿Cómo seria la sintaxis para una funcion que retorna una funcion?

Axel Enrique Galeed Gutierrez

student•

Hola. No he encontrado mucha información sobre el tema, pero te puedo dar mi respuesta desde mi corta experiencia con TypeScript. En caso de que tu retorno sea una función podés usar la siguiente sintaxis.

functionfunction Name (parameters: dataTypes): () => {} { statements }

O puedes usar esta otra que es la que más me gusta.

function functionName (parameters: dataTypes): () => dataTypeReturnedByOtherFunction{ statements }

Ejemplo

function add (a: number, b: number): () => number{
	returnfunction () {
		return a + b;
	}
}
const a = add(1, 2);
console.log(a());

(() => {
    const calcTotal = (prices: number[]): string => {
        let total = 0;
        prices.forEach(item => total += item);
        return total.toString();
    }

    // const rta = calcTotal([1, 2, 1, 1, 1]);
    // console.log(rta);

    const printTotal = (prices: number[]): void => {
        const rta = calcTotal(prices);
        console.log(`El total es ${rta}`);
    }

    const rta = printTotal([1, 2, 1, 1, 1]);
})();

  type SizeTshirt = "M" | "L" | "XG" | "S";
  type User = { name: string; user: string; size: SizeTshirt };

  const greeting = (user: string, name: string, size: SizeTshirt): User => {
    return {
      user,
      name,
      size,
    };
  };

  const calcTotal =(prices: number[])=> {
    let total = 0;
    total = prices.reduce((e,i)=>e+i);
    console.log(`El total es: ${total}`); 
    return total;
  };

  const Nguardado = calcTotal([12,34,31,4,134])
  console.log(Nguardado+1);

(() => {
  const calcTotal = (prices: number[]): string => {
    let total = 0;
    prices.forEach((item) => {
      total += item;
    });
    return total.toString();
  }

  const printTotal = (prices: number[]): void => {
    const rta = calcTotal(prices);
    console.log(`El total es ${rta}`);
  }

  printTotal([1, 2, 3, 5, 6]);
})();

const calcTotalString = (prices: number[]): string => {
    return prices
      .reduce((previousPrice, currentPRice) => previousPrice + currentPRice)
      .toString();
  };

  const printAny = (data: number[], callback: Function): number => {
    const ret: number = callback(data);
    return ret;
  };

  const prices = [2, 2, 2];
  console.log(printAny(prices, calcTotalString));

type callback = (prices: number[]) => string;

const calcTotalString: callback = (prices: number[]): string => {
  return prices
    .reduce((previousPrice, currentPRice) => previousPrice + currentPRice)
    .toString();
};

const printAny = (data: number[], callback: callback) => {
  const ret = callback(data);
  return ret;
};

const prices = [2, 2, 2];
console.log(printAny(prices, calcTotalString));

(() => {
  const calTotal = (prices:  number[]): string =>
   prices.reduce((sum, price) => sum + price)
   .toString();

   const printTotal = (prices: number[]): void =>
   console.log(calTotal(prices));

   printTotal([1,2,3]);

})();

Retorno de funciones

Introducción a TypeScript

Por qué usar TypeScript

TypeScript vs. JavaScript

Configurado nuestro proyecto

Atrapando bugs

El compilador de TypeScript

Veamos el TSConfig.json

Tipos de datos primitivos

Qué es el tipado en TypeScript

Tipos inferidos

Numbers

Booleans

Strings

Arrays

Tipos de datos especiales

Any

Union Types

Alias y tipos literales

Null y Undefined

Funciones

Retorno de funciones

Objetos en funciones

Objetos como tipos

Módulos: import y export

Usando librerías que soportan TypeScript

Usando librerías que NO soportan TypeScript

Próximos pasos

Toma el Curso de Tipos Avanzados y Funciones en TypeScript