Alejandro Sebastian Dubon Estrada
Esta clase es muy importante para entender Angular 💚
Cristian Blandon
¿Angular? Para entender los módulos de JS, para usar React, para usar Vue, para tener código modularizado y limpio, para todo.
Moisés Manuel Morín Hevia
Demasiado, Angular es nuestro ♥
Erick Daniel Pérez Mata
Moisés Manuel Morín Hevia
Thanks, tome el primero xD
Wilkins Bernardo Brito Serrano
Muchas gracias, lo tomé todo
Carlos Jesús Fernández Salazar
Por si alguien tiene la duda a esta altura src = source
Moisés Manuel Morín Hevia
sourse (:
Edwin Alberto Equihua Ochoa
Es muy parecido a la creación de objetos en Java, nada mas que con otra sintaxis.
Mauro Nava
Claro, aunque si quieres comprender como funciona exactamente es recomendable que se analicen los archivos compilados
Moisés Manuel Morín Hevia
Se parece a Python xD pero con diferente sintaxis también.
Jhon Alejandro Córdoba Figueroa
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
Francisco Chim Vera
Tambien pueden hacer los exports de esta manera:
export { PhotoOrientation, Item, Album, Picture, User, };
Bairon Felipe peña castellanos
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.
Jair Israel Avilés Eusebio
Javi Felices
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.
Miguel Angel Reyes Moreno
Como estamos manejando objetos y arrays, recomiendo usar console.table()
console.table(user) console.table(album) console.table(picture)
Luis Alejandro Vera Hernandez
Interejante...!
Sebastian Rodriguez Marin
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?
Angel M. Cereijo Martinez
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?
Aurora Perez
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>
Alan Quispe
Cristian Blandon
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!
Alan Quispe
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 😃
Alex hernandez mitre
uuuy que chulada es TS. _
Yahir Diaz
Falto polimorfismo
Moisés Manuel Morín Hevia
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.
Juan Antonio García Sánchez
Muy bien, ansioso por practicar todo lo aprendido! 😁
Andrés Felipe Eslava Zuluaga
Mauro Nava
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.
James Adrian Rosas Luis
Gracias al profe por este resumen, te permite ver el panorama completo de principio a fin , recopilando todo lo visto durante el curso.
Naldo Duran
,
Carlos Javier Bazan Huaman
el resumen te lo dice todo.
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);
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 = [] }```
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);