Clase 19 de 32 • Curso de TypeScript 3
Contenido del curso
Bryan Alejandro Sánchez Ramírez
Juan Matus
Luis Abdel Rangel Castro
Estanislao Albin Wotoszyn Grillo
Enrique Devars
Alan Quispe
Jorge Méndez Ortega
Cristian Blandon
Juan Diego Urbina Chuscano
Platzi Team
César Palma
Boris Vargas Paucara
Moisés Manuel Morín Hevia
Miguel Angel Reyes Moreno
Jorge Cruz Perez
Santiago Mendoza
Andres David Sanchez
Moisés Manuel Morín Hevia
Diego Fernando Caviedes Camaho
Boris Köhli-Richter
Moisés Manuel Morín Hevia
Federico Walovnik
Saul Vega Ramírez
Héctor Eduardo López Carballo
Griger Ratia
Carlos Javier Bazan Huaman
Juan Esteban Galvis
Moisés Manuel Morín Hevia
David Vargas Domínguez
Stiven Trujillo
Guillermo Rodas Gómez
Alessandra Amicarella
Mauro Eduardo Sánchez Simental
cindy yurley caceres parada
Juan David Sánchez
Mauricio Galvez
Ojo: un parámetro opcional siempre debe ir al final en dado caso que existan otros parámetros obligatorios.
Podes pasar "undefined" para saltarte un parametro opcional en medio de parametros no opcionales.
A required parameter cannot follow an optional parameter.
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
Gracias por el aporte :D
buenisimo me estaba mareando con eso de array
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
Porque los default parameters son propios de JS, a diferencia de los opcionales que son propios de TS.
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
Gracias por el ejemplo compañero, muy util y sencillo
solo el tipado es de typescript, rest parameter es javascript
// Funciones en TypeScript // // Crear una Fotografia: JS // function createPicture(title, date, size) { // // title // } type SquareSize = '100x100' | '500x500' | '1000x1000' // Usamos TS, definimos tipos para paramentros function createPicture(title:string, date: string, size: SquareSize) { // Se crea la fotografia console.log('create Picture using', title, date, size); } createPicture('My Birthday', '2020-03-10', '500x500'); createPicture('Colombia', '2020-03-20'); // --> Error // Parametros opcionales function createPicture(title?:string, date?: string, size?: SquareSize) { // Se crea la fotografia console.log('create Picture using', title, date, size); } // Flat Array Function let createPic = (title: string, date: string, size: SquareSize): object => { // return { // title: title, // date: date, // size: size // }; return { title, date, size }; }; const picture = createPic('Platzi session', '2020-03-10', '100x100'); console.log(picture);
Buen código.
//*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)
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.
Creo que debes repasar la clase de object en los tipos de variables en TypeScript. https://platzi.com/clases/1869-typescript/27973-object/
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,
=> son Arrow functions
let createPicture = (name: string, date?: string): object => ({name, date});
Muy bien, lo hice igual.
Funciones en TS
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 } };
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?
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.
cuantas bondades!
el poder en las funciones de typescript son el tipado y las funciones tipo flecha.
Funciones
/* DEFINIR TIPOS PARA LAS FUNCIONE */ function Funcion(param1: string, param2: number){} /* PARAMETROS OPCIONES CON ? */ function Funcion(param1?: string, param2?: number){} /* PRIMERO LOS OBLIGATORIOS Y LUEGO LOS OPCIONALES */ function Funcion(param1: string, param2?: number){}
Array Function
let funcion = (param1: string, param2: number) : object => { return {} } let funcion = (param1: string, param2: number) : void => {}
Buen algoritmo.
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
Si no le asigno el tipo object a la función, TypeScript infiere que esa función retorna un objeto?
Hola Stiven, Teniendo como ejemplo el siguiente código:
function createObject(id: number, title: string){ return {id, title}; } const obj = createObject(1, 'Test'); console.log(obj);
Si posicionamos el cursor sobre la función
Object de Js, por tanto podemos acceder a las propiedades del mismo, si queremos que retorne un object debemos hacerlo explicitamente.
function createAnotherObject(id: number, title: string): object{ return {id, title}; }
Te dejo el link del código en el playground de typescript. Éxitos!
Al momento de type e interface, que los diferencia o en que situacion podemos/deberiamos usar el uno o el otro?
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
en typescript tambien podemos usar const hello = () => {}; ????
Claro que sí. El tipo de dato que se va a inferir para la variable hello es () => void.
Puedes tipar las arrow functions sin problema:
const sum = (a: number, b: number): number => a + b;