En aquest tema, aprendrem com treballar amb paràmetres opcionals i per defecte en funcions de TypeScript. Aquests conceptes són molt útils per fer que les funcions siguin més flexibles i fàcils d'utilitzar.
Paràmetres Opcional
Els paràmetres opcionals permeten definir arguments que no són obligatoris quan es crida a una funció. Per fer que un paràmetre sigui opcional, simplement afegim un signe de pregunta (?
) després del nom del paràmetre.
Exemple
function greet(name?: string) { if (name) { console.log(`Hello, ${name}!`); } else { console.log("Hello!"); } } greet("Alice"); // Output: Hello, Alice! greet(); // Output: Hello!
Explicació
- En la funció
greet
, el paràmetrename
és opcional. - Si
name
es proporciona, es mostra un missatge personalitzat. - Si
name
no es proporciona, es mostra un missatge genèric.
Paràmetres per Defecte
Els paràmetres per defecte permeten definir valors predeterminats per als arguments d'una funció. Si no es proporciona un valor per a un paràmetre amb un valor per defecte, s'utilitzarà el valor predeterminat.
Exemple
function greet(name: string = "Guest") { console.log(`Hello, ${name}!`); } greet("Alice"); // Output: Hello, Alice! greet(); // Output: Hello, Guest!
Explicació
- En la funció
greet
, el paràmetrename
té un valor per defecte de"Guest"
. - Si
name
es proporciona, es mostra un missatge personalitzat. - Si
name
no es proporciona, es mostra un missatge amb el valor per defecte.
Combinació de Paràmetres Opcional i per Defecte
És possible combinar paràmetres opcionals i per defecte en una mateixa funció. Els paràmetres per defecte poden ser opcionalment proporcionats, mentre que els paràmetres opcionals poden no tenir un valor per defecte.
Exemple
function greet(greeting: string = "Hello", name?: string) { if (name) { console.log(`${greeting}, ${name}!`); } else { console.log(greeting); } } greet("Hi", "Alice"); // Output: Hi, Alice! greet("Hi"); // Output: Hi greet(); // Output: Hello
Explicació
- En la funció
greet
, el paràmetregreeting
té un valor per defecte de"Hello"
. - El paràmetre
name
és opcional. - Si
name
es proporciona, es mostra un missatge personalitzat amb elgreeting
. - Si
name
no es proporciona, es mostra només elgreeting
.
Exercicis Pràctics
Exercici 1
Escriu una funció multiply
que accepti dos paràmetres: a
i b
. El paràmetre b
ha de ser opcional i tenir un valor per defecte de 1
. La funció ha de retornar el producte de a
i b
.
function multiply(a: number, b: number = 1): number { return a * b; } // Prova la funció console.log(multiply(5, 2)); // Output: 10 console.log(multiply(5)); // Output: 5
Exercici 2
Escriu una funció buildName
que accepti tres paràmetres: firstName
, middleName
(opcional) i lastName
(amb valor per defecte "Smith"
). La funció ha de retornar el nom complet.
function buildName(firstName: string, middleName?: string, lastName: string = "Smith"): string { if (middleName) { return `${firstName} ${middleName} ${lastName}`; } else { return `${firstName} ${lastName}`; } } // Prova la funció console.log(buildName("John", "Paul", "Jones")); // Output: John Paul Jones console.log(buildName("John", "Paul")); // Output: John Paul Smith console.log(buildName("John")); // Output: John Smith
Conclusió
En aquesta secció, hem après com utilitzar paràmetres opcionals i per defecte en funcions de TypeScript. Aquests conceptes ens permeten escriure funcions més flexibles i fàcils d'utilitzar. Hem vist exemples pràctics i hem realitzat exercicis per reforçar els conceptes apresos. En el següent tema, explorarem els paràmetres rest, que ens permeten treballar amb un nombre variable d'arguments en una funció.
Curs de TypeScript
Mòdul 1: Introducció a TypeScript
- Què és TypeScript?
- Configuració de l'entorn de TypeScript
- Tipus bàsics
- Anotacions de tipus
- Compilació de TypeScript
Mòdul 2: Treballant amb Tipus
Mòdul 3: Tipus Avançats
Mòdul 4: Funcions i Mòduls
- Tipus de Funció
- Paràmetres Opcional i per Defecte
- Paràmetres Rest
- Mòduls i Espais de Noms
- Decoradors
Mòdul 5: Programació Asíncrona
Mòdul 6: Eines i Millors Pràctiques
- Linting i Formatació
- Proves de Codi TypeScript
- TypeScript amb Webpack
- TypeScript amb React
- Millors Pràctiques