Resumen

Clase 28 de 32 • Curso de TypeScript 3

Clase anteriorSiguiente clase

Alejandro Sebastian Dubon Estrada

student•

Esta clase es muy importante para entender Angular 💚

Cristian Blandón

student•

¿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

student•

Demasiado, Angular es nuestro ♥

Erick Daniel Pérez Mata

student•

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

Moisés Manuel Morín Hevia

student•

Thanks, tome el primero xD

Wilkins Bernardo Brito Serrano

student•

Muchas gracias, lo tomé todo

Jose Daniel Barría Reyes

student•

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

Jimmy Buriticá Londoño

student•

Bien dicho

Natalia Ramirez Parra

student•

Gracias

Carlos Jesús Fernández Salazar

student•

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

Moisés Manuel Morín Hevia

student•

sourse (:

Edwin Alberto Equihua Ochoa

student•

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

Mauro Nava

student•

Claro, aunque si quieres comprender como funciona exactamente es recomendable que se analicen los archivos compilados

Moisés Manuel Morín Hevia

student•

Se parece a Python xD pero con diferente sintaxis también.

Jhon Alejandro Córdoba Figueroa

student•

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

student•

Tambien pueden hacer los exports de esta manera:

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

Bairon Felipe peña castellanos

student•

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

student•

Este es el URL

https://github.com/castellanosfelipe/Class-examples-Javascript-and-typescript.

Javi Felices

student•

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

student•

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

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

Luis Alejandro Vera Hernandez

student•

Interejante...!

Sebastian Rodriguez Marin

student•

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

student•

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

student•

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

Alan Quispe

student•

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 = []
                }```

Cristian Blandón

student•

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

student•

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

student•

uuuy que chulada es TS. _

Yahir Diaz

student•

Falto polimorfismo

Moisés Manuel Morín Hevia

student•

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

student•

Muy bien, ansioso por practicar todo lo aprendido! 😁

Andrés Felipe Eslava Zuluaga

student•

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

Mauro Nava

student•

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

student•

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

student•

Carlos Javier Bazan Huaman

student•

el resumen te lo dice todo.