En aquest tema, aprendrem com compilar el codi TypeScript a JavaScript, que és el llenguatge que els navegadors poden entendre i executar. La compilació és un pas crucial en el desenvolupament amb TypeScript, ja que converteix el codi TypeScript en codi JavaScript.

Abans de començar a compilar, assegura't que tens TypeScript instal·lat. Pots instal·lar TypeScript globalment utilitzant npm (Node Package Manager):

Per verificar que TypeScript s'ha instal·lat correctament, pots executar:

El compilador de TypeScript (tsc) és l'eina que utilitzarem per convertir els fitxers .ts en fitxers .js. Suposem que tenim un fitxer hello.ts amb el següent codi:

Per compilar aquest fitxer, simplement executa:

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

Per a projectes més grans, és recomanable utilitzar un fitxer de configuració tsconfig.json per gestionar les opcions de compilació. Aquest fitxer permet especificar diversos paràmetres de configuració per al compilador.

Per crear un fitxer tsconfig.json bàsic, pots executar:

Això generarà un fitxer tsconfig.json amb una configuració predeterminada. Un exemple de tsconfig.json podria ser:

• target: Especifica la versió de JavaScript a la qual es compilarà el codi TypeScript. En aquest cas, es5.
• module: Defineix el sistema de mòduls que s'utilitzarà. commonjs és el sistema de mòduls utilitzat per Node.js.
• strict: Activa totes les comprovacions estrictes de tipus.
• esModuleInterop: Permet la interoperabilitat amb mòduls ES.
• skipLibCheck: Omple les comprovacions de tipus en fitxers de definició de tipus.
• forceConsistentCasingInFileNames: Assegura que els noms de fitxers siguin consistents en majúscules i minúscules.

• include: Especifica els fitxers i directoris que s'inclouran en la compilació.
• exclude: Especifica els fitxers i directoris que s'exclouran de la compilació.

TypeScript també suporta la compilació incremental, que només recompila els fitxers que han canviat des de l'última compilació. Això pot accelerar significativament el temps de compilació en projectes grans.

Per habilitar la compilació incremental, afegeix la següent opció al teu tsconfig.json:

Per a una experiència de desenvolupament més fluida, pots utilitzar el mode de vigilància (watch mode), que recompila automàticament els fitxers quan detecta canvis. Per activar el mode de vigilància, executa:

1. Crea un fitxer greet.ts amb el següent contingut:

   function greet(name: string): string {
       return `Hello, ${name}!`;
   }
   
   let user = "World";
   console.log(greet(user));
   

2. Compila el fitxer utilitzant tsc greet.ts.

3. Executa el fitxer JavaScript resultant (greet.js) amb Node.js:

   node greet.js
   

El fitxer greet.js generat hauria de ser:

I l'execució del fitxer hauria de mostrar:

En aquesta secció, hem après com compilar codi TypeScript a JavaScript utilitzant el compilador tsc. Hem vist com configurar el compilador amb un fitxer tsconfig.json i com utilitzar opcions avançades com la compilació incremental i el mode de vigilància. Amb aquests coneixements, estàs preparat per començar a treballar amb projectes TypeScript de manera eficient. En el següent mòdul, explorarem com treballar amb diferents tipus en TypeScript.