Introducció

En aquest tema, aprendrem sobre les variables i els tipus de dades en TypeScript. TypeScript és un superconjunt de JavaScript que afegeix tipat estàtic opcional, el que significa que podem definir el tipus de dades de les nostres variables. Això ens ajuda a detectar errors en temps de compilació i a escriure codi més robust i mantenible.

Variables en TypeScript

Declaració de variables

En TypeScript, podem declarar variables utilitzant les paraules clau let, const i var. La diferència principal entre elles és l'àmbit de visibilitat i la mutabilitat.

  • let: Permet declarar variables amb àmbit de bloc i és mutable.
  • const: Permet declarar variables amb àmbit de bloc i és immutable.
  • var: Permet declarar variables amb àmbit de funció i és mutable (no es recomana utilitzar var en TypeScript).

Exemples

let variableLet: number = 10;
const variableConst: string = "Hola, TypeScript!";
var variableVar: boolean = true;

variableLet = 20; // Correcte
// variableConst = "Adéu, TypeScript!"; // Error: no es pot reassignar una variable const
variableVar = false; // Correcte

Tipus de dades en TypeScript

TypeScript proporciona diversos tipus de dades bàsics que podem utilitzar per definir les nostres variables. Aquests inclouen:

  • number: Per a nombres (tant enters com de punt flotant).
  • string: Per a cadenes de text.
  • boolean: Per a valors booleans (true/false).
  • any: Per a qualsevol tipus de dades (evitar si és possible).
  • void: Per a funcions que no retornen cap valor.
  • null i undefined: Per a valors nuls i indefinits.
  • array: Per a arrays.
  • tuple: Per a tuples (arrays amb longitud i tipus fixos).
  • enum: Per a enumeracions.
  • object: Per a objectes.

Exemples

let numero: number = 42;
let text: string = "Aprenent TypeScript";
let esCert: boolean = true;
let qualsevol: any = "Pot ser qualsevol cosa";
let senseValor: void = undefined;
let nul: null = null;
let indefinit: undefined = undefined;

let arrayNumeros: number[] = [1, 2, 3, 4, 5];
let tupleExemple: [string, number] = ["Hola", 10];

enum Color {
    Vermell,
    Verd,
    Blau
}
let colorFavorit: Color = Color.Verd;

let objecte: { nom: string, edat: number } = { nom: "Joan", edat: 30 };

Exercicis pràctics

Exercici 1: Declaració de variables

Declara les següents variables amb els tipus de dades corresponents:

  1. Una variable nom de tipus string amb el valor "Anna".
  2. Una variable edat de tipus number amb el valor 25.
  3. Una variable esEstudiant de tipus boolean amb el valor true.
  4. Una variable hobbies de tipus array de string amb els valors ["lectura", "esport", "música"].

Solució

let nom: string = "Anna";
let edat: number = 25;
let esEstudiant: boolean = true;
let hobbies: string[] = ["lectura", "esport", "música"];

Exercici 2: Treballant amb tuples i enums

  1. Declara una tuple persona que contingui un string (nom) i un number (edat).
  2. Declara un enum Dia amb els valors Dilluns, Dimarts, Dimecres, Dijous, Divendres.
  3. Declara una variable diaFavorit de tipus Dia amb el valor Dimecres.

Solució

let persona: [string, number] = ["Maria", 28];

enum Dia {
    Dilluns,
    Dimarts,
    Dimecres,
    Dijous,
    Divendres
}
let diaFavorit: Dia = Dia.Dimecres;

Errors comuns i consells

  • Error de tipus: Assegura't que les variables es declaren amb el tipus correcte. TypeScript et donarà un error si intentes assignar un valor d'un tipus diferent.
  • Ús de any: Evita utilitzar el tipus any sempre que sigui possible, ja que perd els avantatges del tipat estàtic.
  • Reassignació de const: Recorda que les variables declarades amb const no es poden reassignar.

Conclusió

En aquesta secció, hem après com declarar variables i definir els seus tipus de dades en TypeScript. Hem vist exemples pràctics i hem realitzat exercicis per reforçar els conceptes apresos. Ara estem preparats per avançar cap a les funcions i les funcions fletxa en TypeScript.

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

© Copyright 2024. Tots els drets reservats