Funciones
Contenido del curso
Rafael Moro
César Palma
Jose Ever Muñoz Muñoz
Migdualy Alejandra Gonzalez Martinez
Julián Antonio Mendoza Zuluaga
Andres López
MARIA LAURA ROSSI
Irving Juárez
Emanuel Torres Clemente
John Byron Alzate Hernández
Reinaldo Mendoza
Carlos Fernando Pinzón Jáimes
Oscar Mauricio Acevedo Porras
Axel Enrique Galeed Gutierrez
Juan Manuel Calderón Robles
Joel Alcides Riquelme Martinez
Carlos Rodríguez
César Palma
Andres López
Hector Maluy Fernandez
Alvaro Eduardo Garzón Pira
Angel Mejia
Josue Cerron Tuesta
Daniel Brizuela
Marco Gonzalez
Marvin Javier Santos Fernández
Neil Ruiz
Daniel Avila Cardenas
Daniel Avila Cardenas
Jair Israel Avilés Eusebio
Diego Felipe Gallo García
Diego Reyes Cabrera
También podemos hacer un return explicito usando parentesis en vez de llaves. Dado que retornamos un objeto, es por eso, que dentro de los parentesis hay llaves:
const createProductToJson2 = (title: string, createdAt: Date, stock: number, size?: Size) => ({title, createdAt, stock, size})
maravilla de las arrow functions
amo TS!
Excelente curso, mucha claridad en todos los fundamentos, en ese aspecto Platzi es superior a cualquier otra plataforma qué yo conozca, aquí se enfatiza desde lo básico sin perder de vista la parte práctica...Sigan así, qué gran trabajo
Por desgracia no es así en todos los cursos, pero por lo menos en los que da NicoBytes no se descuidan esos dos aspectos
Los cursos de Nico son son asi.
Funciones en TS
En TS tenemos que declarar el tipo de dato de cada parámetro en la función. Además de que TS nos va a marcar error en caso de que agreguemos mas o menos parámetros de los requeridos.
// JS function createPerson(name, lastName){ return {name, lastName} } createPerson() // no error createPerson(0, true) // no error createPerson('o', 32, true) //no error // TS function createPerson(name: string, lastName: string){ return {name, lastName} } createPerson() // ERROR createPerson(0, true) // ERROR createPerson('o', 32, true) // ERROR
Esta es una manera en la que TS nos ayuda. También podemos tener parámetros opcionales, que si no son declarados, son undefined.
function createPerson( name: string, lastName: string, age?: number){ return {name, lastName, age} }
En este caso age es opcional
correcto eso es muy util.
El contenido de esta clase:
(() => { type Sizes = 'S' | 'M' | 'L' | 'XL'; function createProductJson( title: string, createdAt: Date, stock: number, size: Sizes ){ return { title, createdAt, stock, size } } const producto1=createProductJson("P1", new Date(),12,"XL"); console.log(producto1); console.log(producto1.title); console.log(producto1.stock); console.log(producto1.size); const createProductJsonV2=( title: string, createdAt: Date, stock: number, size?: Sizes ) => { return { title, createdAt, stock, size } } const producto2=createProductJson("P1", new Date(),12); console.log(producto2); console.log(producto2.title); console.log(producto2.stock); console.log(producto2.size); })();
Ojo que existe una diferencia al crear funciones con FUNCTION y con ()=>{}, hoisting es el tema
y la definición del 'this'.
Arrow functions define el THIS, de manera léxica (El valor de this es igual al valor de this afuera de esta, sin importar donde es la invocación), útil para los callbacks (para lo que fueron creadas), aunque ya se pueden usar bien para métodos en clases por la misma manera léxica de definir el THIS.
Les comparto mis apuntes. :D
Tipo de dato Date
Podemos usarlo así tal cual Date no vamos a tener ningún problema como teníamos con Number, Object, etc.
Sintaxis tipo inferido
Funciones declarativas
function functionName (parameters: dataTypes) { statements }
Arrow functions
const functionName = (parameters: dataTypes) => { statements }
Parámetros opcionales
Agregamos ? después del nombre de nuestro parámetro pero antes de los :.
Al no enviar ese parámetro en cuando usamos la función por defecto este será undefined.
function functionName (parameters?: dataTypes): dataTypes { statements }
Recomendación
Se recomienda usar arrow functions por encima de las funciones declarativas normales.
Aqui esta la url del github en la rama de esta clase: https://github.com/platzi/curso-typescript-fundamentos/tree/15-step
Cada clase me fascina mas TS!! Excelente profesor por cierto.
Es buena práctica que si colcoamos parámetros opcionales colocarle un valor podefecto!
creo que para el caso sería mejor que lidiar con undefined en runtime
Gracias pro el tip. Sabes si TS tiene alguna sintaxis especial para darles valores por defecto a los parámetros?
¿Esto de parámetros opcionales también se puede en JS o es exclusivo de TS?
Tipos de argumentos
Algo muy bueno a tener en cuenta que las funciones pueden manejar tanto tipos de parámetros obligatorios (Los especificados en la declaración de la función), luego están los parámetros opcionales que estos siempre deben de ir al final de los parámetros, es decir, después de los parámetros obligatorios, esto es regla en las últimas versiones de TS y por último, los parametros por defecto que se escriben como en JS, que sería myName: string = "Alvaro", en caso que no envíe nada, la variable myName será "Alvaro".
El operador ? en los parametros de una función es sugar syntax para el tipo de dato udenfined.
const greet = (name?: string = undefined) => { name ? console.log(`Greetings ${name}!`) : console.log('Greetings!') } greet('Angel') # Greetings Angel! greet() # Greetings
Excelente!
Como no amar TypeScript! Saludos Magellanics :)
Hola buenas, como están?, les recomiendo una extensión que se llama Error Lens, para Visual Studio Code, refleja los errores en la misma línea
(()=>{
// Está es una función sencilla que
// se declará como constante y recibirá
// 2 parámetros de tipo númerico y con la fecha
// le decimos que se va a realizar una suma.
/*
const Inicio_Fun = (a:number,b:number) => a + b;
console.log(Inicio_Fun(2,3)); // Mostramos la salida.
*/
// Creamos un tipo de lista para las tallas.
type Sizes = 'M' | 'S' | 'XL' | 'L';
// Creamos la funcion que va a recibir 4 datos.
function createProductoJson(
// Recibirá estos parámetros con sus tipos de datos.
title:string,
crearFecha: Date,
stock: number,
talla: Sizes
){
// Vamos a retornar cada campo cuando llamemos y le pasemos
// a la funciónn.
return{
title,
crearFecha,
stock,
talla
}
}
// Creamos una variable constante y le pasamos la función
// y de parámetro le pasamos los tipos de datos que va a
// recibir.
const producto1 = createProductoJson('P1',new Date, 12,'XL');
// Mostramos todo en tipo json.
console.log(producto1);
/*
Aquí podemos acceder a cada uno de los elementos de la
función colocando la variable a la que le asiganamos los
parámetros y luego un punto yaccederemos a las propiedades.
console.log(producto1.title);
console.log(producto1.crearFecha);
console.log(producto1.stock);
console.log(producto1.talla);
*/
// Creamos otra función en la cual llevará los mismos
// parámetros pero observamos un ? en talla.
const createProductoJsonV2 = (
title:string,
crearFecha: Date,
stock: number,
talla?: Sizes // Significa que si existe lo mostrará sino será undefiend
// y nos permitirá colocar los parámetros que queramos.
) => {
return{
title,
crearFecha,
stock,
talla
}
}
// Creamos una variable constante y le pasamos la función
// y de parámetro le pasamos los tipos de datos que va a
// recibir.
const producto2 = createProductoJsonV2('P2',new Date, 32);
console.log(producto2);
/*
Aquí podemos acceder a cada uno de los elementos de la
función colocando la variable a la que le asiganamos los
parámetros y luego un punto yaccederemos a las propiedades.
console.log(producto2.title);
console.log(producto2.crearFecha);
console.log(producto2.stock);
console.log(producto2.talla);
*/
})();
Los problemas que se mencionan en el minuto 7:00 de esta lección, están asociados al dominio de un concepto de JavaScript, el cual es necesario para construir y manipular funciones en TypeScript correctamente.
Este concepto es el del this que tienen las arrow functions, cuyo nombre técnico suele ser this léxico o fijo y es la razón por la que se sugiere emplear las arrow functions al trabajar con callbacks y al utilizar TypeScript.
Este this léxico hace que el valor utilizado de this sea el correcto, debido a que no se pierde al cambiar el contexto de ejecución, lo que lo hace más predecible porque no depende de la forma en la que sea llamada la función.
Por esta razón al estar dentro de una callback, al necesitar acceder al this externo o cuando se requiere evitar errores de contexto se sugiere el uso de arrow functions, las cuales deben evitarse cuando se necesita el tipo de this que ofrecen las funciones construidas con la palabra reservada function, cuyo nombre técnico es this dinámico.
(() => { type Sizes = 'S' | 'M' | 'T' | 'XL'; let cardNumber : number | string; function createProductoToJson( name: string, cardNumber: number | string, createdAt: Date, stock: number, size: Sizes ) { return { name, cardNumber, createdAt, stock, size } } const rta = createProductoToJson('Daniel Avila', 3212313,new Date(), 456, 'M'); console.log('Usuario',{rta}); const createProductoToJsonV2 = ( name: string, cardNumber: number | string, createdAt: Date, stock: number, size?: Sizes )=> { return { name, cardNumber, createdAt, stock, size } } const rta2 = createProductoToJsonV2('Maria Mechda', 'CO0990323',new Date(), 156); console.log('Usuario 2: ',{rta2}); console.log(`El cardNumber del usuario es: ${rta2.cardNumber} `); })();
Algo que oberve es que al momento de trabajar con parametros opcionales en la firma de la funcion, solo permite agregarle el ? al ultimo parametro de la firma, y no permite a parametros anteriores, alguien sabe por que ?
¿Donde puedo encontrar mayor informacion con respecto a los posibles problemas del scope (this) al utilizar function vs arrow functions?
"Arrow functions don't have their own bindings to this, arguments or super, and should not be used as methods."
aquí
Ya encontraste? Este canal de Youtube es super bueno y explica muy bien This https://www.youtube.com/watch?v=bS71_W_BDFE
