Cursos Empresas Blog Live Conf Eventos Precios

0:008:34

Recursos

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.

Retorno de funciones

Curso de TypeScript

Clase 18 de 24

Clase 18 / 24

Marvin Javier Santos Fernández

Hace un mes

// Función con retorno.

(()=>{

// Vamos a crear una función en el cual tendrá un

// parámetro de precio y que va a recibir un array

// de números y : lo que se acepta recibir en esté

// caso será number

const Cant_Total = (price: number[]): number =>{ // Si queremos pasarlo a string entonces le colocamos

// Creamos una variable que será igual a 0.

let ver_total = 0;

// Recorremos la lista de números valor por valor

price.forEach((item)=>{

// Para luego cada valor sumarlo de

// uno en uno.

ver_total += item;

})

// Luego se retorna el total obtenido.

return ver_total; // Y aquí le colocamos el método ToString();

}

// Creamos el array y luego le pasamos la función

// que creamos para luego asignarle los valores al array.

const ver = Cant_Total([1,2,3,4,5]);

// Mostrarmos el total que se realizó en el recorrido.

console.log(Con el return da ${ver});

// Creamos otra función que en este caso le colocamos la palabra

// void que significa que no devolverá nada asi que no se utiliza

// return

const mostrarTotaal = (price: number[]): void =>{

// Como ya tenemos la función que realiza la suma

// solamente la asignamos a una varible y le

// pasamos de parámetro el precio.

const rta = Cant_Total(price);

// Y simplemente mostramos el total de la suma.

console.log(Con el no retorno da ${rta});

}

// Llamamos la función y le enviamos de parámetro

// el array de números.

mostrarTotaal([1,2,3,4,5]);

})();

Comentarios (25)25 comentarios

Irving Juárez

Hace 5 años

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

Hace 4 años

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

Stiven Trujillo

cual es?

Jorge Winder Avila

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

Kamila villablanca

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

Federico Ivan Llano

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

Carlos Eduardo Plasencia Prado

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

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

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

Otras soluciones alternativas

Fernando Vela Vargas

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

💡 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

aquí las tengo :v

Juan Cortes

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

Profesor

Víctor Andrés Córdova Poma

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

Hace un año

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

Itzam G

Hace 6 meses

Hola, sólo me gustaría agregar, que toString() siempre convierte un número a string; sin embargo, la representación del número puede modificarse, según el argumento que se pase a la función:

toString()
toString(radix)

Parameters

radix Optional

An integer in the range 2 through 36 specifying the base to use for representing the number value. Defaults to 10.

Return value

A string representing the specified number value. Scientific notation is used if radix is 10 and the number's magnitude (ignoring sign) is greater than or equal to 10<sup>21</sup> or less than 10<sup>-6</sup>.

Fuente:

Gustavo Pú

❤️|

Edgar Meneses

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

})();

Neil Ruiz

Hace 2 meses

Considero importante hacer una precisión asociada al término void que se utiliza a partir del minuto 6:38 en esta lección.

Lo que realmente sucede en una función de JavaScript en la que no se define un return explícitamente, es que dicha función retornará un valor undefined de forma predeterminada. Es decir, siempre se retornará algo.

Esto significa que cuando se emplea la palabra reservada void, técnicamente se le indica a TypeScript, que dicho valor undefined generado de forma predeterminada por no haber definido un return explícitamente, debe ser ignorado.

En TypeScript este uso se debe a que es necesario expresar la intención del retorno de la función y al emplear void se indica que no se debe usar dicho retorno, evitando un uso incorrecto de la función y/o del resultado de la misma.

Esto plantea una diferencia entre void y undefined, la cual consise en que en el primero no importa el valor del retorno, ya que su uso puede ignorar cualquier tipo de valor, mientras que al usar undefined el valor debe ser exactamente este.

Gustavo Adolfo Silva Alarcón

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

Hace 3 años

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

Fernando Orozco Velasquez

Es respuesta abreviado nada mas

Recursos

Resumen

Retorno de funciones

Progreso del curso

Introducción a TypeScript

Tipos de datos primitivos

Tipos de datos especiales

Próximos pasos