No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Retorno de funciones

18/24
Recursos

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:

  1. 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}`);
}
  1. 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.

Aportes 15

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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)
}

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

Les comparto mis apuntes. 馃槃

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]);
})();

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

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,
    };
  };

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

Esta interesante el curso 馃槃

  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);

馃挕 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.

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]);
})();

Otras soluciones alternativas

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;
  }
}

aqu铆 las tengo :v

鉂わ笍|

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]);

})();