-
Javascript Moderno
Ya que Angular es un framework javascript es importante conocer las nuevas funcionalidades y sintaxis del mismo.
Entre las nuevas características están:
Permite declarar funciones de forma corta y resolver el problema de scoping del this que se presentaba previamente en Javascript.
Antes:
function Persona() {
var self = this;
self.edad = 0;
setInterval(function growUp() {
self.edad++;
}, 1000);
}Ahora:
class Persona {
edad = 0;
constructor() {
setInterval(() => {
this.edad++;
}, 1000);
}
}Anteriormente en Javascript se declaraban las variables usando la keyword var.
let es el nuevo var mejorando problemas de scoping mientras const permite solamente asignar la "constante" una vez.
let name = 'Jon';
name = 'Jon Doe'; // ✅
const age = 10;
age = 11; // ❌ age es una constante y ya fue declaradaHace posible la extracción de datos de arreglos u objetos a variables de forma sencilla
var foo = ["one", "two", "three"];
// sin destructuración
let one = foo[0];
let two = foo[1];
let three = foo[2]; // asignación en tres lineas
// con destructuración
let [one, two, three] = foo; // asignación en una sola lineaPermite definir funciones con un(os) parametro(s) con valores por defecto
fight(hero: string, villian: string, location = 'Earth') {
console.log(`Fighting: ${hero} vs ${villian} on ${location}`);
}
fight('Iron Man', 'Thanos', 'Titan');
// Output: Fighting: Iron Man vs Thanos on Titan
fight('Captain America', 'Thanos');
// Output: Fighting: Captain America vs Thanos on EarthPermite representar un número indefinido de elementos
eat(protein: string, fruit: string, ...sweets: string[]) {
console.log(`Eating: ${protein} with ${fruit} and ${sweets}`);
}
eat('chicken', 'mango');
// Output: Eating: chicken with mango and
eat('meat', 'lemonade', 'chocolate', 'm&m');
// Output: Eating: meat with lemonade and chocolate,m&mPermite a un elemento iterable o un objeto ser expandido donde cero o mas argumentos o elementos son esperados
sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6Tiene muchos usos, por ejemplo para copiar un arreglo:
const fruits = ['apple', 'pear', 'peach'];
const food = [...fruits, 'eggs', 'milk' ];
//food: ["apple", "pear", "peach", "eggs", "milk"]O incluso objetos:
const obj1 = {
foo: 'bar',
x: 42
};
const obj2 = {
...obj1,
y: 35,
z: 10
};
// obj2: {foo: "bar", x: 42, y: 35, z: 10}const heroes = [ 'Iron Man', 'Captain America', 'Thor', 'Black Widow' ];
for (let hero of heroes) {
console.log(hero);
}
// Output: Iron Man
// Captain America
// Thor
// Black Widow- Lenguaje de programación libre y de código abierto.
- Desarrollado y mantenido por Microsoft.
- Es un superset de Javascript.
- Añade tipos estáticos y objetos basados en clases.
- Este código se transpila a Javascript.
let isAwesome: boolean = true;Cadenas de texto, rodeadas por ('), (") o (`)
let name: string = 'Doe';
let firstName: string = "Jon";
let id: string = `JDoe`;El usar `` (back ticks) se conoce como template literal y se puede realizar interpolaciones ahí
let age: number = 22;
let information: `Jon Doe, Age: ${age}`
// information: Jon Doe, Age: 22Permite almacenar enteros o números flotantes, en notación decimal, binaria, ocatl o hexadecimal
let decimalNumber: number = 42;
let binaryNumber: number = 0b101010; // => 42
let octalNumber: number = 0o52; // => 42
let hexadecimalNumber: number = 0x2a; // => 42let heroes: string[] = [ 'Iron Man', 'Captain America', 'Thor', 'Black Widow' ];
let fibonacci: number[] = [ 1, 2, 3, 5, 8 ];Arreglo que contiene un número fijo de elementos de un tipo especificado
let myFavoriteTuple: [string, number, boolean];
myFavoriteTuple = ['chair', 20, true]; // ✅
myFavoriteTuple = [5, 20, true]; // ❌ el elemento de la posición 0 no es un string!Por defecto asocian números (desde el 0 incrementando de 1 en 1) a cada miembro del enum
enum Sizes {
Small,
Medium,
Large,
}
Sizes.Small; // => 0
Sizes.Medium; // => 1
Sizes.Large; // => 2También se pueden asignar otros valores (numericos o strings)
enum ThemeColors {
Primary = 'primary',
Secondary = 'secondary',
Dark = 'dark',
DarkSecondary = 'darkSecondary',
}Tipo de variable usado cuando no se conoce el tipo especifico
let foo: any = 4;
foo = 'a string';
foo = false;Nota: Es recomendable no utilizar any mucho, pues si el compilador no sabe el tipo de datos se pierde una de las grandes ventajas de TS.
void es un poco como lo opuesto a any. Por lo general, puede ver esto como el tipo de retorno de funciones que no devuelven un valor
logger(msg: string): void {
console.log(msg);
}Son subtipos de los otros tipos, por lo que a las variables de tipo string, number o boolean se les puede asignar un valor de null o undefined.
let hello: undefined = undefined; // realmente no es muy util usarlo de esta forma
let name: string = undefined;
let firstName: string = null;Las clases soportan herencia, super calls, instanciar objetos, métodos estáticos y constructores
class Apple extends Fruit {
isBitten: boolean;
constructor(color) {
super(color);
this.taste = 'sweet';
this.hasSeeds = true;
this.isBitten = false;
}
eat() {
this.isBitten = true;
super.eat();
}
}interface Animal {
kind: string;
weight: number;
}
let dog: Animal;
dog = {
kind: 'mammal',
weight: 10,
}; // ✅
dog = {
kind: true,
weight: 10,
}; // ❌ - kind should be a stringHay ocasiones en las que una variable puede tener multiplos tipos, para esto se usa el union type.
log(message: string | number): void {
console.log(msg);
}Combina multiples tipos juntos.
type Student = {
id: string;
age: number;
};
type Employee = {
companyId: string;
};
let person: Student & Employee;
person.age = 21; // ✅
person.companyId = 'SP302334'; // ✅
person.id = '10033402'; // ✅
person.name = 'Henry'; // ❌class Hero {
id: string;
name: string;
team?: string;
powers: string[];
constructor(name: string, team?: string, powers?: string[]) {
this.id = name + team;
this.name = name;
this.team = team;
this.powers = powers;
}
};
const spiderMan = new Hero('Spider Man', 'Avengers', [ 'spider sense', 'super strenght' ]);
const ironMan = new Hero('Iron Man', 'Avengers');
const scarletWitch = new Hero('Scarlet Witch');