Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Resumen

28/32
Recursos

Aportes 19

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Esta clase es muy importante para entender Angular 💚

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

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

Por si alguien tiene la duda a esta altura
src = source

Es muy parecido a la creación de objetos en Java, nada mas que con otra sintaxis.

Tambien pueden hacer los exports de esta manera:

export {
    PhotoOrientation,
    Item,
    Album,
    Picture,
    User,
};

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 ❤️

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.

Como estamos manejando objetos y arrays, recomiendo usar console.table()

console.table(user)
console.table(album)
console.table(picture)

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?

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! 😁

  • Los módulos ayudan a seccionar el código para que todo sea más legible a la hora de leer y codear.
  • 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.