El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

TypeScript és un llenguatge de programació desenvolupat per Microsoft que es basa en JavaScript, però afegeix característiques addicionals com el tipat estàtic. És especialment útil per a projectes grans i complexos, ja que ajuda a detectar errors en temps de compilació i millora la mantenibilitat del codi.

Què és TypeScript?

TypeScript és un superconjunt de JavaScript que afegeix tipat estàtic opcional i altres característiques avançades. Això significa que qualsevol codi JavaScript vàlid és també codi TypeScript vàlid. Les característiques clau de TypeScript inclouen:

Tipat estàtic: Permet definir tipus per a variables, funcions, etc., ajudant a detectar errors en temps de compilació.
Classes i interfícies: Proporciona una manera més estructurada de definir objectes i les seves relacions.
Compatibilitat amb JavaScript: Qualsevol codi JavaScript és vàlid en TypeScript, el que facilita la migració progressiva.

Instal·lació de TypeScript

Per començar a utilitzar TypeScript, primer cal instal·lar-lo. Això es pot fer fàcilment utilitzant npm (Node Package Manager).

npm install -g typescript

Després de la instal·lació, pots verificar que TypeScript s'ha instal·lat correctament executant:

tsc --version

El teu primer fitxer TypeScript

Creem un fitxer TypeScript senzill per veure com funciona. Anomena el fitxer hello.ts i afegeix el següent codi:

let message: string = "Hello, TypeScript!";
console.log(message);

Explicació del codi

let message: string: Declara una variable message de tipus string.
message = "Hello, TypeScript!": Assigna un valor a la variable message.
console.log(message): Imprimeix el valor de message a la consola.

Compilació de TypeScript a JavaScript

Per executar el codi TypeScript, primer cal compilar-lo a JavaScript. Això es fa utilitzant el compilador TypeScript (tsc).

tsc hello.ts

Això generarà un fitxer hello.js amb el següent contingut:

var message = "Hello, TypeScript!";
console.log(message);

Ara pots executar el fitxer JavaScript utilitzant Node.js:

node hello.js

Avantatges de TypeScript

Detecció d'errors en temps de compilació: El tipat estàtic ajuda a detectar errors abans d'executar el codi.
Millor mantenibilitat: Les classes i interfícies fan que el codi sigui més estructurat i fàcil de mantenir.
Compatibilitat amb JavaScript: Pots començar a utilitzar TypeScript en projectes existents de JavaScript sense problemes.

Exercici pràctic

Exercici 1: Declaració de variables

Declara variables de diferents tipus (string, number, boolean) i imprimeix-les a la consola.

Solució

let name: string = "John Doe";
let age: number = 30;
let isStudent: boolean = true;

console.log(`Name: ${name}`);
console.log(`Age: ${age}`);
console.log(`Is Student: ${isStudent}`);

Exercici 2: Funció amb tipat

Crea una funció que accepti dos números com a paràmetres, els sumi i retorni el resultat. Defineix els tipus de dades per als paràmetres i el tipus de retorn.

Solució

function add(a: number, b: number): number {
    return a + b;
}

let result = add(5, 10);
console.log(`Result: ${result}`);

Conclusió

En aquesta secció, hem introduït TypeScript, hem vist com instal·lar-lo i hem creat el nostre primer fitxer TypeScript. També hem explorat alguns dels avantatges de TypeScript i hem realitzat exercicis pràctics per reforçar els conceptes apresos. En el següent mòdul, aprofundirem en les variables i els tipus de dades en TypeScript.

Introducció a TypeScript

Què és TypeScript?

Instal·lació de TypeScript

El teu primer fitxer TypeScript

Explicació del codi

Compilació de TypeScript a JavaScript

Avantatges de TypeScript

Exercici pràctic

Exercici 1: Declaració de variables

Solució

Exercici 2: Funció amb tipat

Solució

Conclusió

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

Mòdul 5: Serveis i injecció de dependències

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques