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

HOME

Introducció

En aquest tema, aprendrem sobre les funcions en TypeScript, incloent-hi les funcions tradicionals i les funcions fletxa (arrow functions). Les funcions són una part fonamental de qualsevol llenguatge de programació, ja que ens permeten encapsular codi reutilitzable i modular.

Funcions tradicionals

Definició de funcions

Les funcions en TypeScript es defineixen de manera similar a JavaScript. Aquí teniu un exemple bàsic:

function saludar(nom: string): string {
    return `Hola, ${nom}!`;
}

console.log(saludar("Anna")); // Sortida: Hola, Anna!

Explicació del codi

function saludar(nom: string): string defineix una funció anomenada saludar que pren un paràmetre nom de tipus string i retorna un string.
return Hola, ${nom}!`` retorna una cadena de text que inclou el nom passat com a argument.
console.log(saludar("Anna")); crida la funció saludar amb l'argument "Anna" i imprimeix el resultat a la consola.

Paràmetres opcionals i valors per defecte

TypeScript permet definir paràmetres opcionals i valors per defecte per a les funcions.

function saludarOpcional(nom: string, salutacio: string = "Hola"): string {
    return `${salutacio}, ${nom}!`;
}

console.log(saludarOpcional("Anna")); // Sortida: Hola, Anna!
console.log(saludarOpcional("Anna", "Bon dia")); // Sortida: Bon dia, Anna!

Explicació del codi

salutacio: string = "Hola" defineix un paràmetre amb un valor per defecte. Si no es proporciona cap valor per a salutacio, es farà servir "Hola".

Funcions fletxa (Arrow Functions)

Definició de funcions fletxa

Les funcions fletxa són una sintaxi més concisa per definir funcions. Utilitzen l'operador =>.

const saludarFletxa = (nom: string): string => {
    return `Hola, ${nom}!`;
}

console.log(saludarFletxa("Anna")); // Sortida: Hola, Anna!

Explicació del codi

const saludarFletxa = (nom: string): string => { ... } defineix una funció fletxa assignada a la constant saludarFletxa.
La sintaxi => s'utilitza per separar els paràmetres de la funció del seu cos.

Funcions fletxa amb retorn implícit

Si el cos de la funció és una única expressió, podem ometre les claus {} i la paraula clau return.

const saludarFletxaCurt = (nom: string): string => `Hola, ${nom}!`;

console.log(saludarFletxaCurt("Anna")); // Sortida: Hola, Anna!

Explicació del codi

const saludarFletxaCurt = (nom: string): string => Hola, ${nom}!`` defineix una funció fletxa amb retorn implícit.

Exercicis pràctics

Exercici 1

Escriu una funció tradicional anomenada sumar que prengui dos números com a arguments i retorni la seva suma.

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

console.log(sumar(3, 4)); // Sortida: 7

Exercici 2

Escriu una funció fletxa anomenada restar que prengui dos números com a arguments i retorni la seva diferència.

const restar = (a: number, b: number): number => a - b;

console.log(restar(10, 4)); // Sortida: 6

Exercici 3

Escriu una funció fletxa anomenada multiplicar que prengui dos números com a arguments i retorni el seu producte. Utilitza la sintaxi de retorn implícit.

const multiplicar = (a: number, b: number): number => a * b;

console.log(multiplicar(3, 4)); // Sortida: 12

Resum

En aquest tema, hem après sobre les funcions en TypeScript, incloent-hi les funcions tradicionals i les funcions fletxa. Hem vist com definir funcions amb paràmetres opcionals i valors per defecte, així com la sintaxi més concisa de les funcions fletxa. També hem practicat amb alguns exercicis per reforçar els conceptes apresos. En el proper tema, explorarem les classes i interfícies en TypeScript.

Funcions i funcions fletxa

Introducció

Funcions tradicionals

Definició de funcions

Explicació del codi

Paràmetres opcionals i valors per defecte

Explicació del codi

Funcions fletxa (Arrow Functions)

Definició de funcions fletxa

Explicació del codi

Funcions fletxa amb retorn implícit

Explicació del codi

Exercicis pràctics

Exercici 1

Exercici 2

Exercici 3

Resum

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