TYPESCRIPT

TYPESCRIPT
Tipat de dades estàtic. Sempre mantindrà
el mateix tipus d’objecte o variable en
temps d’execució. Si una variable es
defineix com a string, sempre ho serà.
JAVASCRIPT
Tipat de dades dinàmic. L’intèrpret defineix
el tipus de l’objecte o variable en temps
d’execució. Una variable pot iniciar-se com
un string i aquesta mateixa variable pot
passar a ser numèrica.

 Per a projectes mitjans i grans, atès que el codi typescript s’ha de compilar per
transformar-lo a javascript.
 El compilador ajuda a detectar errors abans de publicar el treball.

 Variables:
o number, string, boolean…
o let identifacor: string;
o let arreglo: string[] = [“Fran”, “Ari”];
o let comodin: any; o també let comodin; //pot emmagatzemar qualsevol tipus.
No recomanat
o var identificador: tipo; // variables d’àmbit global si estan definides fora d’una
funció, i d’àmbit local si estan definides dins una funció (i només existeix per a
aquesta funció). Per tant, es poden tenir dues variables amb el mateix
identificador però en àmbits diferents i amb referències a memòria diferents.
o let identificador: tipo; //recomanat. Funcionament similar al var. Amb un
scope més específic que evita la sobre escriptura al declarar variables. La
variable només pertany al bloc entre {}
o const identificador: tipo = valor; //per declarar constants. Scope pertany al
bloc entre {}. Prohibeix la reassignació de valors, al contrari que les i var que si
permet resignar valors.

 Funcions:

function suma(v1: number,v2: number) : number {

return v1+v2;
}
suma(1, 2); //Retorn 3

function creaUsuario(nombre_apellido : string, edad : number) : void { }

//no retorna res, excepte undefined o null

function opcional(nombre?: string) { }

opcional();
opcional("Fran");

function obligatorio(obligatorio : number) { }

obligatorio(2);
 function porDefecto(porDefecto ="Inicial") { }

 Objectes:
o Entitat amb característiques (atributs) que la fan diferent a la resta i pot
realitzar diferents accions (mètodes)

 Classes:
o Motlle que serveix per crear nous objectes que comparteixen atributs però
amb diferents valors i mètodes. Són objectes que es poden agrupar dintre
d’una categoria atès que comparteixen característiques i accions entre ells. Per
exemple, un Renault Kadjar i un Nissan Qashqai pertanyen a la classe SUV ja
que tenen 4 rodes, acceleren, frenen i tenen una alçada lliure més elevada que
la resta de turismes. Per tant, els objectes que es derivin de la classe SUV
hereten unes atributs i uns mètodes però amb diferents valors. Per exemple,
un SUV pot tenir diferent color, motor, marca, equipament, etc, però
continuarà sent un SUV. Per tant, un Renault Kadjar és una instancia de la
classe SUV.

class Speaker{
hi(nombre: string) {
console.log(nombre);
}
}
let speaker: Speaker = new Speaker();
speaker.hi("Yowi");

Class Lapiz:
color =’Amarillo1
tamaño_centimetros = 10
material = ‘madera’

def pintar(self):
print(‘Pintar sobre una superficie’)
lapiz_rojo = Lapiz()

class Video { }
let miVIdeo: Video = newVideo();

 Constructor:
o És únic per a cada classe, no retorna resultat i no es pot repetir. S’hi defineixen
els paràmetres per crear nous objectes.

class Video{
constructor(title: string) {
console.log(title);
}
}
let miVideo: Video = new Video("Hola mundo");
 Propietats i mètodes:
class Video{
title: string;
constructor(title: string) {
this.title = title;
}

printTitle() { console.log(this.title); }
changeTitle(title: string) { this.title = title; }
getTitle(): string { return this.title;}
}

let miVideo: Video = new Video("Hola mundo");

miVideo.printTitle();
miVideo.changeTitle("Demo");
console.log(miVideo.getTitle());

 Herència:
o Partint d’una classe base es poden crear altres classes que descendeixen de la
classe principal.

//Classe Pare
class Video{
title: string;
constructor(title: string) {
this.title = title;
}

play() { console.log("Playing"); }
stop() { console.log("Stopped");}
}

//Classe filla que hereta de Video

class YouTubeVideo extends Video{
//Hereta els mètodes play i stop de la classe mare Video
}

//Instància de la classe filla

let miVideo: YouTubeVideo = new YouTubeVideo("Hola Mundo");

miVideo.play();

 Sobre escriptura:
o Es vol modificar un mètode heretat de la classe Pare.

//Classe Pare
class Video{
 title: string;
constructor(title: string) {
this.title = title;
}

play() { console.log("Playing"); }
stop() { console.log("Stopped");}
}

//Classe filla que hereta de Video

class YouTubeVideo extends Video{
//Sobre escriptura del mètode play de la classe pare
play() { console.log("Playing a YouTube Video"); }
}

//Instància de la classe filla

let miVideo: YouTubeVideo = new YouTubeVideo("Hola Mundo");

miVideo.play();

o La paraula reservada “Super” permet cridar un mètode de la classe pare

encara que a la classe filla fem sobre escriptura del mateix mètode. Per tant,
ens permet tenir els dos mètodes a la vegada, el del pare i el sobre escrit:

//Classe Pare
class Video{
title: string;
constructor(title: string) {
this.title = title;
}

play() { console.log("Playing"); }
stop() { console.log("Stopped");}
}

//Classe filla que hereta de Video

class YouTubeVideo extends Video{
//Sobre escriptura del mètode play de la classe pare
play() {
super.play()//Crida el mètode play de la classe pare
console.log("Playing a YouTube Video");
}
}

//Instància de la classe filla

let miVideo: YouTubeVideo = new YouTubeVideo("Hola Mundo");

miVideo.play();
 Modificadors d’accés (encapsulació):
o Públic: totalment accessible.
o Protected: accessible a les subclasses.
o Private: No accessible fora de la classe ni a les subclasses.

class Video{
public title: string;
constructor(title: string) {
this.title = title;
}
}
class YouTube extends Video{
printTitle() {
console.log(this.title);// no error
}
}
let miVideo: Video = new Video("Hola mundo");
console.log(miVideo.title);// no error

class Video{
protected title: string;
constructor(title: string) {
this.title = title;
}
}
class YouTube extends Video{
printTitle() {
console.log(this.title);// no error, està dintre de la sublclasse
}
}
let miVideo: Video = new Video("Hola mundo");
console.log(miVideo.title); // error, no està ni a la classe ni a la subclasse

class Video{
private title: string;
constructor(title: string) {
this.title = title;
}
}
class YouTube extends Video{
printTitle() {
console.log(this.title);// error, no està dintre de la classe o subclasse
}
}
let miVideo: Video = new Video("Hola mundo");
 console.log(miVideo.title);// error, no està dintre de la classe o subclasse

 Mètodes d’accés (GETTER i SETTER):

o GETTER: permet llegir els valor
o SETTER: permet modificar els valors dels atributs

class Video{
private _title: string;
constructor(title: string) { this._title = title; }

get title(): string{ return this._title }

set title(title: string) {this._title = title}
}

let miVideo: Video = new Video("Hola");

miVideo.title = "Hola Mundo";

console.log(miVideo.title);

 Mètodes i atributs estàtics:

o Pertanyen a la classe i no a l’objecte.
o Només es necessita una única còpia de la variable.
o S’utilitza per poder crear instàncies/objectes d’una classe perquè certs atributs
no es repeteixin cada vegada que s’instancien i d’aquesta manera no ocupar
una espai a la memòria.
ATRIBUT DINÀMIC: a cada instància de la ATRIBUT ESTÀTIC: a cada instància es crida a
classe Requestor es repeteix la variable url, i la variable de la classe. No es duplica ni
això vol dir que a cada instància es duplica s’ocupa espai a la memòria
informació i s’ocupa més espai a la memòria.
class Requestor{ class Requestor{
url: string; static url: string =
constructor() { "https://codigofacilito.com";
this.url = "https://codigofacilito.com" getCourses() {
} console.log(`${Requestor.url}/cursos`);
getCourses() { }
console.log(`${this.url}/cursos`); getArticles() {
} console.log(`${Requestor.url}/articles`);
getArticles() { }
console.log(`${this.url}/articles`); }
}
}
MÈTODE ESTÀTIC
class Requestor{
static url: string =
"https://codigofacilito.com";
static getCourses() {
console.log(`${Requestor.url}/cursos`);
}
static getArticles() {
console.log(`${Requestor.url}/articles`);
}
 }

Requestor.getArticles();
 Interfícies:
o Implementada per una classe.
o Només és una plantilla formada per propietats i mètodes de les classes.
o No assigna valors, només defineix una plantilla.
o Una classe només pot heretar d’una altra classe. Però una classe pot heretar
d’una altra classe i implementar tantes interfícies com es vulguin.
interface Asset{
x, y, width, height: number;
getCoords(): string;
}
class Hero implements Asset{
x: number;
y: number;
width: number;
height: number;

getCoords(): string{
return "";
}
}
class Bullet implements Asset{
x: number;
y: number;
width: number;
height: number;

getCoords(): string{
return "";
}
}
class Enemy implements Asset{
x: number;
y: number;
width: number;
height: number;

getCoords(): string{
return "";
}
}
//Classe Spacebullet hereda de Bullet i implmenta la interfíce Asset
class SpaceBullet extends Bullet implements Asset{}

class Collisions{
static check(obj: Asset, object2: Asset) {
//Validar que exista forma de comparar los elementos
//Compare obj with object2
//Permite comprovar que los elementos cumplan con la estructura para realizar la
comparación
 //Solo se pueden recibir objetos que cumplan con los argumentos definidos en la
interface
}

}
 Classes abstractes:
o Similar a les interfícies però a diferència d’elles, si poden tenir
implementacions.
o No es poden instanciar.
o Poden contenir mètodes abstractes
o Un classe si pot heretar d’una classe abstracta (ha d’implementar els mètodes
que es vulguin heretar).
o Un cop s’hereta de la classe abstracta, ja no es pot heretar d’altres classes.

abstract class Asset{

x: number;
y: number;
width: number;
height: number;
getCoords(): string { return `${this.x},${this.y}` };

abstract move(speed: number): boolean;

}

class Hero extends Asset{

move(speed: number) { return true };
}
 Namespaces:
o Permeten agrupar identificadors sota un mateix nom (classes, interfícies...)
o Serveix per evitar que dos programes diferents utilitzin el mateix nom per a
diferents coses.

namespace CF{
export class YouTube { }
export const url: string = "htttps://codigofacilito.com"
const privado: string = "123";

let video: CF.YouTube = new CF.YouTube();

 Union types (tipus d’unió):

o Permet assignar diferents tipus de dades a una mateixa variable.
o Permet utilitzar toString() sense preocupar-se de quin tipus de dada hi ha
emmagatzemada a la variable.
o Elimina alguns dels avantatges del tipat estàtic ja que no se sap segur quin
tipus de dades tenim i què podem i no podem fer amb elles.

let age: number | string | boolean;

age = 20;
age = 'Hola';
age.toString();
 Type guards(guardians de tipus):
o Resol el problema del Union types, ja que afegeix tipat estatic i permet
assegurar el tipus amb el què es treballa.
o Permet revisar de quin tipus és l’objecte “typeof”
o Predicat de tiups amb “is”
function isNumber(obj: number | string) : obj is number {
return typeof obj === 'number';
}
function isString(obj: number | string) : obj is string {
return typeof obj === 'string';
}
function printAge(age: number | string) {
if (isNumber(age)) {
age.charAt(0);//Error ja que el compilador detecta que aquí no hi va un string
//Estem segurs de que l'objecte és un número
}
else {
age.charAt(0);//Correcte ja que el compilador detecta que és un string
//Estem segurs de que l'objecte és un string
}
}

 Intersection types(tipus d’intersecció):

o Permet combinar dos tipus de dades en una sola variable.
class User {
name: string;
}
class Admin {
permissions: number;
getPermission() { }
}
let user: User & Admin;// crea un nou tipis User&Admin
user.name = "Uriel";
user.permissions = 5;
user.getPermission();
user = new User();//dona error ja que user és User&Admin

 Type assertions:
o Permet emmagatzemar per separat cadascun dels objectes que formen un
objecte creat mitjançant un Intesection types.
o Corregeix el tipus que typescript ha assignat a un objecte per quin li diguem.
o Permet substituir un tipus per un altre amb “as”.
class User {
name: string;
}
class Admin {
permissions: number;
getPermission() { }
 }
let user: User & Admin;// crea un nou tipis User&Admin
user.name = "Uriel";
user.permissions = 5;
user.getPermission();
user = new User() as User&Admin;//diu al compilador que User és un User&Admin
 Type aliases (alies de tipus):
o Permet definir un àlies per a un tipus existent.

type numero = number;

let edad: numero;
edad = 20;
___________________________________________

//en assertions o intesections

type NumberOrString = number | string;
let age: NumberOrString;
class User{
name: string;
}
class Admin {
permission: number;
}
type UserAdmin = User & Admin;
let user: UserAdmin;
___________________________________________

//permet assignar l'estructura d'una funció a un type aliases

type FuncString = () => string;//funció que ha de retornar per força un string
function executor(f: FuncString);//funció que rep com argument una altra funció
que sempre retorna una string

executor(() => "hola");//correcte

executor(() => 20);//error

 Tuplas:
o Array a on es defineixen els tipus que la conformen.
o Array que pot emmagatzemar diferents tipus de dades.
o Si es defineixen dos tipus diferents per a les entrades 0 i 1, la resta d’entrades
pot ser dels tipus 0 o tipus 1.

let tupla: [string, number];

tupla[0] = 'Hola';
tupla[1] = 20;
tupla[2] = 'Holi'; // string | number són correctes

 Enum:
o Serveix per assignar un nom a un conjunt de valors numèrics per poder
identificar-los d’una manera més clara.

enum Tallas { Chica = 1, Mediana = 2, Grande = 3 }

enum PaymentState { Creado, Pagado, Deuda };
class Pedido{
 talla: number;
}
let pedido: Pedido = new Pedido();
pedido.talla = Tallas.Chica;
alert(Tallas.Chica);// 1
alert(PaymentState.Deuda)//2
 Decoradors i Arguments per a decoradors:
o Patró de programació a on agafem un mètode, classe, etc. i li afegim
informació o funcionalitat addicional a allò que estem aglutinant.
o Funcions que es criden amb certs arguments específics (constructor de la
classe).
o Tenim en control de tots els objectes que neixen de la classe decorada i el
control de la pròpia classe. Es poden agregar propietats, mètodes, afegir
metadates, emmagatzemar-los en arrays...
function Decorador(cls: Function) {
alert('Soy un decorador en ejecución');
cls.prototype.className = cls.name;
//afegeix la propiedad className al prototype de la funció que rebem
//tots els objectes que instanciem tindran aquest propietat
//permet coneixer el nom de la classe del objecte instanciat
}

@Decorador
class Speaker{

@Decorador
class Listtener{

let speaker: Speaker = new Speaker();

let listtener: Listtener = new Listtener();

//com que la propietat className només existeix quan el decorador es troba

temps d'execució
//cal utilitzar type assertions per definir com any i no doni error mentre no es
troba en execució
alert((speaker as any).className);
alert((listtener as any).className);

 Genèrics: