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

  1. 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!";
      
  2. 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
      
  3. 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}`;
        }
      }
      
  4. 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 };
      
  5. 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

let salutacio: string = "Hola, món!";
console.log(salutacio);

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

  1. Crea una classe Llibre amb les propietats titol i autor.
  2. Afegeix un constructor per inicialitzar aquestes propietats.
  3. 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.

© Copyright 2024. Tots els drets reservats