Cursos Empresas Blog Live Conf Eventos Precios

0:0014:19

Funciones en TypeScript

Clase 19 de 32

Clase 19 / 32

Juan Diego Urbina Chuscano

falto parámetros Rest. Otra característica de TypeScript es la posibilidad de pasar una lista indefinida de valores y que los reciba un vector.

El concepto de parámetro Rest se logra antecediendo tres puntos al nombre del parámetro:

function sumar(...valores:number[]) {
  let suma=0;
  for(let x=0;x<valores.length;x++)
    suma+=valores[x];
  return suma;
}
console.log(sumar(10, 2, 44, 3));
console.log(sumar(1, 2));
console.log(sumar());

El parámetro 'valores' se le anteceden los tres puntos seguidos e indicamos que se trata de un vector de tipo 'number'. Cuando llamamos a la función le pasamos una lista de valores enteros que luego la función los empaqueta en el vector:

console.log(sumar(10, 2, 44, 3));
console.log(sumar(1, 2));
console.log(sumar());

La función con un parámetro Rest puede tener otros parámetros pero se deben declarar antes.

Los parámetros Rest no pueden tener valores por defecto

Platzi Team

Hace 6 años

Gracias por el ejemplo compañero, muy util y sencillo

César Palma

Hace 5 años

solo el tipado es de typescript, rest parameter es javascript

Comentarios (33)33 comentarios

Bryan Alejandro Sánchez Ramírez

Ojo: un parámetro opcional siempre debe ir al final en dado caso que existan otros parámetros obligatorios.

Juan Matus

Podes pasar "undefined" para saltarte un parametro opcional en medio de parametros no opcionales.

Luis Abdel Rangel Castro

A required parameter cannot follow an optional parameter.

Estanislao Albin Wotoszyn Grillo

Me parece que se equivocó al llamar flat array function, en realidad es fat arrow functions. Se las llama fat arrow por el tipo de flecha: -> simple => fat

Enrique Devars

Gracias por el aporte :D

Alan Quispe

buenisimo me estaba mareando con eso de array

Jorge Méndez Ortega

Se comentan solo los valores opcionales, pero nunca se comentaron los valores por defecto, les comparto un ejemplo

/**
 * Listado de propiedades de una foto
 *
 * @param   {string}      title Nombre de la foto.
 * @param   {string}      date Fecha en la que fue tomada.
 * @param   {SquareSize}  size (Optional) Tamaño de la foto.
 *
 * @return  {object}
 */
const dataPicture = (title: string, date: string, size: SquareSize = "100x100"): object => ({
    title,
    date,
    size,
});

El ultimo parámetro size es opcional y siempre se tomara por defecto las medidas de 100x100

Cristian Blandon

Porque los default parameters son propios de JS, a diferencia de los opcionales que son propios de TS.

Boris Vargas Paucara

Moisés Manuel Morín Hevia

Buen código.

Miguel Angel Reyes Moreno

Los parámetros en las funciones son tipados
Se pueden definir parámetros opcionales
El tipo de retorno puede ser un tipo básico, enum, alias, tipo literal o una combinación de ellos

//*Crear una fotografía
//*Usando TS, definimos tipos para parámetros

type SquareSize = '100x100' | '500x500' | '1000x1000'

function createPicture(title:string, date:string, size: SquareSize) {
  //*Se crea la fotografía
  console.log('Create picture using: ', title, date, size)
}

createPicture('My picture', '2021/10/22', '1000x1000')
//!createPicture('Disney Vacation', '2018-03-12') //!Esto da un error porque necesita 3 parámetros

//*Parámetros opcionales
//*Solo hace falta escribir '?' al lado del parámetro
function createPhoto(title:string, date:string, size?: SquareSize) {
  //*Se crea la fotografía
  console.log('Create photo using: ', title, date, size)
}

createPhoto('Foto1', '2020-10-10') //! El tercer parámetro es undefined


//* Flat array function
let createPic = (title:string, date:string, size:SquareSize):object => {
  return { title, date, size }
}

const picture = createPic('Platzi session', '2020-03-10', '100x100')
console.log('Picture: ', picture)

Jorge Cruz Perez

Tengo un conflicto o una duda, con el tipo :object o incluso Object, imprime directo toda la variable, me refiero a picture, pero si solo quisieramos imprimir title o date o size por separado ¿como le haria?, el conflicto es porque ts me reporta el error de que la propiedad no existe para el objeto picture, pero compila/trasnpila y genera el código js el cual se ejecuta sin problema.

Santiago Mendoza

Creo que debes repasar la clase de object en los tipos de variables en TypeScript. https://platzi.com/clases/1869-typescript/27973-object/

Andres David Sanchez

Esta característica de solo declarar la variable dentro de un objeto y este le asigna el nombre de la propiedad de forma automática se llama ShortHand property

return {
title,
date,
size
}

Thanks,

Diego Fernando Caviedes Camaho

=> son Arrow functions

Boris Köhli-Richter

let createPicture = (name: string, date?: string): object => ({name, date});

Muy bien, lo hice igual.

Federico Walovnik

Funciones en TS

Los parametros en las funciones son tipados
Se pueden definir parametros opcionales
Se puede definir que tipo de datos devolvera la funcion

type SquareSize = '100x100' | '500x500' | '1000x1000';

// el simbolo ? indica que el parametro es opcional. 
// Siempre que tengamos un parametros opcional tiene que encontrasrse al final
// en caso de que no resivamos este parametro opc va a tomar el valor pode default
function createPicture(title: string, date: string, size?: SquareSize = "100x100"){
	
}

// Fat Array Function
let createPic = (title: string, date: string, size?: SquareSize): object => {
	return {
		title,
		date,
		size
	}
};

Saul Vega Ramírez

El uso de parametros opcionales, elimina la necesidad de sobrecarga de metodos o funciones? es decir tener 3 firmas distintas de esta funcion, una con solo el primer parametro, otra con 2, otra con 3, porque si son opcionales, pues practicamente se puede invocar como si tuvieramos las 3 firmas declaradas. o cual sería la diferencia?

Héctor Eduardo López Carballo

Hola!

No, la sobrecarga de métodos está pensada para poder cambiar el comportamiento del método dependiendo del parámetro que se recibe. Yo pienso que esto está principalmente destinado para que los desarrolladores no puedan meter cosas que no van y por lo tanto se puedan evitar fallos en el código.

Griger Ratia

cuantas bondades!

Carlos Javier Bazan Huaman

el poder en las funciones de typescript son el tipado y las funciones tipo flecha.

Juan Esteban Galvis

Buen algoritmo.

David Vargas Domínguez

En Typescript, por defecto cuando se coloca parámetros a una función estos son requeridos.

Para volver un parámetro como opcional, debemos colocar el símbolo ? después del nombre del parámetro.

function buildName(firstName: string, lastName?: string) {
  // ...
}

Cabe recalcar que los parámetros opcionales deben ir después de los requeridos. Colocarlos de la siguiente es inválido.

function buildName(firstName?: string, lastName: string) // Invalid

Stiven Trujillo

Si no le asigno el tipo object a la función, TypeScript infiere que esa función retorna un objeto?

Guillermo Rodas Gómez

Alessandra Amicarella

Al momento de type e interface, que los diferencia o en que situacion podemos/deberiamos usar el uno o el otro?

Mauro Eduardo Sánchez Simental

Alguien que me pueda apoyar de como trabajar una dependencia que no este soportada TS y la tengo que incluir en mi proyecto TS como esta npm i conekta

cindy yurley caceres parada

en typescript tambien podemos usar const hello = () => {}; ????

Juan David Sánchez

Claro que sí. El tipo de dato que se va a inferir para la variable hello es () => void.

Mauricio Galvez

Puedes tipar las arrow functions sin problema:

const sum = (a: number, b: number): number => a + b;

Funciones en TypeScript

Progreso del curso

Introducción a TypeScript

Entorno de Desarrollo

Tipos en TypeScript

Tipos Personalizados

Módulos

Cierre