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 utilitzarvar
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
iundefined
: 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:
- Una variable
nom
de tipusstring
amb el valor "Anna". - Una variable
edat
de tipusnumber
amb el valor 25. - Una variable
esEstudiant
de tipusboolean
amb el valortrue
. - Una variable
hobbies
de tipusarray
destring
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
- Declara una tuple
persona
que contingui unstring
(nom) i unnumber
(edat). - Declara un enum
Dia
amb els valorsDilluns
,Dimarts
,Dimecres
,Dijous
,Divendres
. - Declara una variable
diaFavorit
de tipusDia
amb el valorDimecres
.
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 tipusany
sempre que sigui possible, ja que perd els avantatges del tipat estàtic. - Reassignació de
const
: Recorda que les variables declarades ambconst
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
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- La teva primera aplicació Angular
- Arquitectura d'Angular
Mòdul 2: Conceptes bàsics de TypeScript
- Introducció a TypeScript
- Variables i tipus de dades en TypeScript
- Funcions i funcions fletxa
- Classes i interfícies
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
- Introducció al client HTTP
- Realització de sol·licituds HTTP
- Gestió de respostes HTTP
- Ús d'observables