Funciones en TypeScript

Clase 19 de 32 • Curso de TypeScript 3

Bryan Alejandro Sánchez Ramírez

student•

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

Juan Matus

student•

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

Luis Abdel Rangel Castro

student•

A required parameter cannot follow an optional parameter.

Estanislao Albin Wotoszyn Grillo

student•

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

teacher•

Gracias por el aporte :D

Alan Quispe

student•

buenisimo me estaba mareando con eso de array

Jorge Méndez Ortega

student•

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

student•

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

Juan Diego Urbina Chuscano

student•

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

student•

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

César Palma

student•

solo el tipado es de typescript, rest parameter es javascript

Boris Vargas Paucara

student•

// 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'); // --&gt; 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 =&gt; {
    // return {
    //     title: title,
    //     date: date,
    //     size: size
    // };
    return { title, date, size };
};

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

Moisés Manuel Morín Hevia

student•

Buen código.

Miguel Angel Reyes Moreno

student•

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

student•

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

student•

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

student•

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
}

Moisés Manuel Morín Hevia

student•

Thanks,

Diego Fernando Caviedes Camaho

student•

=> son Arrow functions

Boris Köhli-Richter

student•

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

Moisés Manuel Morín Hevia

student•

Muy bien, lo hice igual.

Federico Walovnik

student•

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

student•

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

student•

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

student•

cuantas bondades!

Carlos Javier Bazan Huaman

student•

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

Juan Esteban Galvis

student•

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 => 
{}

Moisés Manuel Morín Hevia

student•

Buen algoritmo.

David Vargas Domínguez

student•

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

student•

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

Guillermo Rodas Gómez

student•

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

) Typescript infiere que retorna un 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!

Alessandra Amicarella

student•

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

student•

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

student•

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

Juan David Sánchez

student•

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

Mauricio Galvez

student•

Puedes tipar las arrow functions sin problema:

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

/**
 * 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,
});

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

// 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'); // --&gt; 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 =&gt; {
    // return {
    //     title: title,
    //     date: date,
    //     size: size
    // };
    return { title, date, size };
};

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

//*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)

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

/* 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){}

Funciones en TypeScript

Introducción a TypeScript

El lenguaje de programación TypeScript

Instalación de herramientas para TypeScript

Instalación de herramientas en Windows

Navegación y refactorización

Entorno de Desarrollo

El compilador de TypeScript

El archivo de configuración de TypeScript

Mi primer proyecto TypeScript

Tipos en TypeScript

Tipado en TypeScript

Number, Boolean y String

Any

Void y never

null y undefined

Object

Array

Tupla

Enum

Unión de Tipos, Alias y Tipos Literales

Aserciones de tipo

Funciones en TypeScript

Resumen

Tipos Personalizados

Interfaces

Interfaces: propiedades opcionales

Extensión de interfaces

Clases

Clases públicas y privadas

Métodos Get y Set

Herencia de clases y propiedades estáticas

Resumen

Módulos

Principios de responsabilidad única

Resolviendo módulos

Webpack y agrupación de Módulos

Cierre

Cierre