Introducció
TypeScript és un llenguatge de programació de codi obert desenvolupat per Microsoft. És un superconjunt de JavaScript, el que significa que qualsevol codi JavaScript vàlid és també codi TypeScript vàlid. TypeScript afegeix tipat estàtic opcional i altres característiques avançades a JavaScript, fent-lo més robust i mantenible.
Característiques Clau de TypeScript
-
Tipat Estàtic:
- TypeScript permet definir tipus per a variables, funcions, paràmetres, etc. Això ajuda a detectar errors en temps de compilació en lloc de temps d'execució.
- Exemple:
let message: string = "Hola, TypeScript!";
-
Compilació a JavaScript:
- El codi TypeScript es compila a JavaScript, el que significa que es pot executar en qualsevol entorn que suporti JavaScript, com navegadors web i servidors Node.js.
- Exemple de compilació:
tsc script.ts
-
Suport per a les últimes característiques de JavaScript:
- TypeScript suporta les últimes característiques de JavaScript (ES6 i posteriors), com classes, mòduls, i funcions de fletxa.
- Exemple:
class Persona { nom: string; constructor(nom: string) { this.nom = nom; } saludar() { return `Hola, ${this.nom}`; } }
-
Interfícies i Tipus Personalitzats:
- TypeScript permet definir interfícies i tipus personalitzats per estructurar millor el codi i fer-lo més llegible.
- Exemple:
interface Persona { nom: string; edat: number; } let jo: Persona = { nom: "Joan", edat: 30 };
-
Suport per a Genèrics:
- Els genèrics permeten crear components reutilitzables que funcionen amb diferents tipus de dades.
- Exemple:
function identitat<T>(arg: T): T { return arg; } let sortida = identitat<number>(5);
Beneficis de TypeScript
- Millor Mantenibilitat: El tipat estàtic i les interfícies ajuden a mantenir el codi més organitzat i fàcil de mantenir.
- Detecció Primerenca d'Errors: Els errors es poden detectar en temps de compilació, reduint els errors en temps d'execució.
- Millor Suport per a IDEs: TypeScript proporciona una millor experiència de desenvolupament amb autocompletat, navegació de codi i refactorització.
- Escalabilitat: És ideal per a projectes grans i equips de desenvolupament, ja que ajuda a mantenir el codi coherent i fàcil de comprendre.
Exemples Pràctics
Exemple 1: Tipat Estàtic
Exemple 2: Classes i Mètodes
class Cotxe { marca: string; model: string; constructor(marca: string, model: string) { this.marca = marca; this.model = model; } descripcio(): string { return `Aquest cotxe és un ${this.marca} ${this.model}.`; } } let elMeuCotxe = new Cotxe("Toyota", "Corolla"); console.log(elMeuCotxe.descripcio());
Exemple 3: Interfícies
interface Animal { nom: string; ferSoroll(): void; } class Gos implements Animal { nom: string; constructor(nom: string) { this.nom = nom; } ferSoroll(): void { console.log("Bup Bup!"); } } let elMeuGos = new Gos("Rex"); elMeuGos.ferSoroll();
Exercici Pràctic
Exercici 1: Crear una Classe
- Crea una classe
Llibre
amb les propietatstitol
iautor
. - Afegeix un constructor per inicialitzar aquestes propietats.
- Afegeix un mètode
descripcio
que retorni una cadena amb el títol i l'autor del llibre.
class Llibre { titol: string; autor: string; constructor(titol: string, autor: string) { this.titol = titol; this.autor = autor; } descripcio(): string { return `El llibre "${this.titol}" és escrit per ${this.autor}.`; } } let elMeuLlibre = new Llibre("El Quixot", "Miguel de Cervantes"); console.log(elMeuLlibre.descripcio());
Conclusió
TypeScript és una eina poderosa que afegeix tipat estàtic i altres característiques avançades a JavaScript, millorant la mantenibilitat i la robustesa del codi. En aquest mòdul, hem après què és TypeScript, les seves característiques clau i els beneficis que ofereix. En el següent tema, configurarem l'entorn de desenvolupament per començar a escriure codi TypeScript.
Curs de TypeScript
Mòdul 1: Introducció a TypeScript
- Què és TypeScript?
- Configuració de l'entorn de TypeScript
- Tipus bàsics
- Anotacions de tipus
- Compilació de TypeScript
Mòdul 2: Treballant amb Tipus
Mòdul 3: Tipus Avançats
Mòdul 4: Funcions i Mòduls
- Tipus de Funció
- Paràmetres Opcional i per Defecte
- Paràmetres Rest
- Mòduls i Espais de Noms
- Decoradors
Mòdul 5: Programació Asíncrona
Mòdul 6: Eines i Millors Pràctiques
- Linting i Formatació
- Proves de Codi TypeScript
- TypeScript amb Webpack
- TypeScript amb React
- Millors Pràctiques