Resumen
Contenido del curso
Alejandro Sebastian Dubon Estrada
Cristian Blandon
Moisés Manuel Morín Hevia
Erick Daniel Pérez Mata
Moisés Manuel Morín Hevia
Wilkins Bernardo Brito Serrano
Jose Daniel Barría Reyes
Jimmy Buriticá Londoño
Natalia Ramirez Parra
Carlos Jesús Fernández Salazar
Moisés Manuel Morín Hevia
Edwin Alberto Equihua Ochoa
Mauro Nava
Moisés Manuel Morín Hevia
Jhon Alejandro Córdoba Figueroa
Francisco Chim Vera
Bairon Felipe peña castellanos
Jair Israel Avilés Eusebio
Javi Felices
Miguel Angel Reyes Moreno
Luis Alejandro Vera Hernandez
Sebastian Rodriguez Marin
Angel M. Cereijo Martinez
Aurora Perez
Alan Quispe
Cristian Blandon
Alan Quispe
Alex hernandez mitre
Yahir Diaz
Moisés Manuel Morín Hevia
Juan Antonio García Sánchez
Andrés Felipe Eslava Zuluaga
Mauro Nava
James Adrian Rosas Luis
Naldo Duran
Carlos Javier Bazan Huaman
Esta clase es muy importante para entender Angular 💚
¿Angular? Para entender los módulos de JS, para usar React, para usar Vue, para tener código modularizado y limpio, para todo.
Demasiado, Angular es nuestro ♥
Codigo de la clase
photo-app.ts
export enum PhotoOrientation { Landscape, Portrait, Square, Panorama } export class Item { constructor(public readonly id: number, protected title: string) {} } export class User { private album: Album[]; constructor(private id: number, private username: string, private firstName: string, private isPro: boolean) { this.album = []; } addAlbum(album: Album) { this.album.push(album); } } export class Album extends Item { private pictures: Picture[]; public constructor(id: number, title: string) { super(id, title); this.pictures = []; } public addPicture(picture: Picture) { this.pictures.push(picture); } } export class Picture extends Item { public constructor(id: number, title: string, private _date: string, private _orientation: PhotoOrientation) { super(id, title); } public toString() { return `[id: ${this.id}, title: ${this.title}, orientation: ${this._orientation}]`; } }
main.ts
import { User, Album, Picture, PhotoOrientation } from './photo-app'; const user = new User(1, 'Erickowski', 'Erick', true); const album = new Album(10, 'Platzi Album'); const picture = new Picture(1, 'Foto', '2020-08', PhotoOrientation.Landscape); // Creamos relaciones user.addAlbum(album); album.addPicture(picture); console.log('user', user);
Thanks, tome el primero xD
Muchas gracias, lo tomé todo
Módulos en TypeScript: Los módulos en typescript proveen un mecanismo para una mejor organización del código y promueven su reutilización A partir de ECMAScript 2015 los módulos son parte nativa del lenguaje Javascript
Importando y exportando modulos: Generalmente se define un modulo con la idea de agrupar codigo relacionado. Podemos tomar criterios en torno a la funcionalidad, features, utilitarios, modelos, etc.
Los miembros de modulo interactúan con el uso de las palabras reservadas import y export
Bien dicho
Gracias
Por si alguien tiene la duda a esta altura src = source
sourse (:
Es muy parecido a la creación de objetos en Java, nada mas que con otra sintaxis.
Claro, aunque si quieres comprender como funciona exactamente es recomendable que se analicen los archivos compilados
Se parece a Python xD pero con diferente sintaxis también.
me siento como si estuviera utilizando Java en Netbeans. No voy a necesitar estar buscando en Google cada 2 minutos para poder escribir la siguiente línea de código <3
Tambien pueden hacer los exports de esta manera:
export { PhotoOrientation, Item, Album, Picture, User, };
Hola. Dejo este repositorio donde esta to lo de necesitas saber e JavaScript y typescript con ejemplos faciles y entendibles, si quieres puedes tomar la información que necesites o complementar este repositorio y así crear una guía fácil y completa para personas que estén iniciando. []https://github.com/castellanosfelipe/Class-examples-Javascript-and-typescript.(url) Espero les sirva.
Dejo la url correcta, o al menos la que ahora funciona. El punto forma parte
https://github.com/castellanosfelipe/Class-examples-Javascript-and-typescript.
Un saludo.
Como estamos manejando objetos y arrays, recomiendo usar console.table()
console.table(user) console.table(album) console.table(picture)
Interejante...!
Buenas noches, cuando hago uso del import y el export de Typescript, cuando intento agregar el archivo main.js a un archivo index.html y abrirlo en el navegador me sale un error. Alguna idea?
Asegurate de importar en el html la versión ".js" (es decir, la compilada de Ts a Js) y no la versión de tu fichero en ".ts". Sí ya haces eso, ¿qué error te estaba mostrando?
Para poder mostrar los resultados en el html, desbes primero compilar el archivo ts a js, luego en el archivo html, lo importas.
Ejemplo:
archivo.ts ... usamos en la terminal el comando tsc, compilamos el archivo y se convierte en archivo.js. luego, desde el html, usamos un
<script src="archivo.js"> resulta ser el archivo compilado el que termina acá. </script>Ayuda por que se antepone la palabra reservada private a los argumentos del constructor 😮
constructor(private id: number, private username: string, private firstName: string, private isPro: boolean ) { this.album = [] }```
Para indicar que son atributos privados :) Es decir, no pueden ser modificados directamente sino a través de métodos (getters & setters).
Al definir clases, por buenas prácticas, los atributos deben ser privados (solo dejas "a la vista" lo que requiere el programa para funcionar)... Si no fueran privados, cualquier persona en el código podría poner username = whatever y el atributo del objeto cambiaría (lo cual no es bueno).
¡Saludos!
muchas gracias, es verdad ahora que lo veo. Aunque es una sintaxis rara para mí, prefiriría poner los private en el cuerpo de la clase 😃
uuuy que chulada es TS. _
Falto polimorfismo
Módulos Mecanismo para una mejor organización. Código relacionado será un módulo. import y export. tsc --init, crear src para almacenar js, en el archivo json outDir / dist, en el archivo principal contentrá toda la definición del código. Se usa export antes de las clases para decirle que voy a exportar y a cada hoja importar lo deseado.
Muy bien, ansioso por practicar todo lo aprendido! 😁
import & export son las palabras claves para compartir los móduilos entre archivos.photo-app.ts
export enum PhotoOrientation { Landscape, Portrait, Square, Panorama, }; export class User { private album: Album[]; constructor(private id: number, private username: string, private firstName: string, private isPro: boolean ) { this.album = []; } addAlbum(album: Album) { this.album.push(album); } } export class Item { constructor(public readonly id: number, protected title: string) { } } export class Album extends Item{ picture: Picture[]; constructor( id: number, title: string ) { super(id, title); this.picture = []; } addPicture(picture: Picture) { this.picture.push(picture); } } export class Picture extends Item { constructor( id: number, title: string, private date: string, private _orientation: PhotoOrientation ) { super(id, title); } private toString(): string { return `[id: ${this.id}, title: ${this.title}, orientation: ${this._orientation}]` } }
main.ts
import { User, Album, Picture, PhotoOrientation } from './photo-app'; const user = new User(1, 'afelipelds', 'Andrés', true); const album = new Album(10, 'Platzi pictures'); const picture = new Picture(100, 'foto en el bosque', '12/17/2020', PhotoOrientation.Landscape); //creando relaciones user.addAlbum(album); album.addPicture(picture); console.log('user -> ', user);
Los modulos son demasiado importantes al trabajar con frameworks/librerias como Vue, React y Angular. Ya que permiten la reutilizacion de codigo entre todos los componentes.
Gracias al profe por este resumen, te permite ver el panorama completo de principio a fin , recopilando todo lo visto durante el curso.
,
el resumen te lo dice todo.