Functies in TypeScript

Dit artikel legt functies in TypeScript uit.

YouTube Video

Functies in TypeScript

Functies in TypeScript zijn JavaScript-functies met toegevoegde typeannotaties. In TypeScript kun je robuustere code schrijven door duidelijk de typen invoer (parameters) en uitvoer (returnwaarden) voor functies te definiëren. Hieronder introduceren we de basis methoden voor het definiëren van functies en enkele kenmerken van functies in TypeScript.

Basisfunctie Definitie

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• De functie add neemt twee argumenten van het type number en geeft een waarde terug van het type number.
• Het neemt twee argumenten, x en y, beide van het type number, met hun types expliciet gespecificeerd.
• Het retourtype is ook gespecificeerd als : number.

Anonieme Functies (Functie-uitdrukkingen)

Anonieme functies en functie-uitdrukkingen kunnen ook in TypeScript worden gebruikt. Typen kunnen op dezelfde manier worden geannoteerd.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• Je kunt een anonieme functie aan een variabele toewijzen en deze later aanroepen.

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• Je kunt een benoemde functiedeclaratie gebruiken om recursieve aanroepen mogelijk te maken.

Pijlfuncties

Type-annotaties kunnen ook met pijlfuncties worden gebruikt.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

Deze code definieert een arrow-functie subtract met typeannotaties, die twee getallen als argumenten neemt en hun verschil retourneert.

Optionele en Standaard Parameters

Parameters kunnen optioneel worden gemaakt of standaardwaarden krijgen.

Optionele Parameters

Het toevoegen van ? na de parameternaam maakt het optioneel.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

Deze code accepteert een optioneel argument; als het argument wordt opgegeven, wordt er met de naam gegroet, anders wordt er een algemene begroeting geretourneerd.

Standaard Parameters

Je kunt ook standaardwaarden instellen voor parameters.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

Deze functie gebruikt "Guest" als standaardwaarde als er geen argument wordt doorgegeven, en groet met de opgegeven of standaardnaam.

Functie Type Definitie

Het is ook mogelijk om het type van de functie zelf te definiëren. Dit wordt bijvoorbeeld gebruikt bij het doorgeven van een functie als argument.

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

Deze code definieert een functietype Operation die twee getallen neemt en een getal retourneert, en gebruikt dit vervolgens om optel- en vermenigvuldigingsfuncties te maken en uit te voeren.

Wanneer er geen returnwaarde is (void type)

Voor functies zonder returnwaarde, specificeer het type void.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

Deze code definieert een void functie logMessage die een tekstbericht neemt en dit afdrukt naar de console zonder een waarde terug te geven.

Callbackfunctie

Een functie als argument aan een andere functie doorgeven en deze later uitvoeren wordt een callbackfunctie genoemd. Het wordt vaak gebruikt bij asynchrone verwerking en gebeurtenisafhandeling.

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

In dit voorbeeld wordt een functie die een waarde naar de console uitvoert doorgegeven als een callbackfunctie.

Alternatief kun je een callbacktype definiëren met behulp van type of interface.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

Het definiëren van een callbacktype met type of interface verbetert de herbruikbaarheid.

Functie Overloading

Met functie-overbelasting kun je functies definiëren met dezelfde naam maar met verschillende parameterlijsten. In TypeScript kun je meerdere functies met dezelfde naam definiëren en verschillende bewerkingen uitvoeren afhankelijk van de types en hoeveelheden parameters.

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

In TypeScript wordt overloading als volgt bereikt:.

• Overload-handtekening

  • Definieert hoe de functie kan worden gebruikt (zijn handtekening). Door dit meerdere keren te schrijven, wordt overloading mogelijk.

• Implementatie-handtekening

  • Implementeert de daadwerkelijke functietekst. Dit deel wordt slechts één keer gedefinieerd en behandelt alle gevallen die in de overload-handtekeningen zijn opgegeven.

Regels voor Overloading

De volgende regels zijn van toepassing op functie overloading:.

• Volgorde van Overload-handtekeningsdefinities

  • Aangezien de evaluatie van boven naar beneden plaatsvindt, wordt aanbevolen om specifieke types eerst te definiëren, gevolgd door meer generieke types.

• Compatibiliteit van de Implementatie-handtekening

  • De implementatiesignatuur moet compatibel zijn met de argumenten en retourwaarden van alle overbelastingssignaturen.

• Specificeer Details in Overbelastingssignaturen

  • De implementatiesignatuur is vaak dubbelzinnig, dus details moeten in de overbelastingssignaturen worden gespecificeerd.
  • Als alleen de implementatiesignatuur is gedefinieerd, zal de type-afleiding voor de functie onvoldoende zijn.

Samenvatting

Functies in TypeScript hebben de volgende kenmerken.

• Typeannotaties
  • Door typen voor argumenten en returnwaarden te specificeren, kun je veiliger code schrijven.
• Anonieme functies en pijlfuncties
  • Ze kunnen net als in JavaScript worden gebruikt, en het toevoegen van typeannotaties verbetert de typesveiligheid.
• Optionele en standaardparameters
  • Je kunt de argumentenspecificatie flexibeler maken indien nodig.
• Functietype-definities
  • Definieer het type van de functie zelf om typecontroles uit te voeren.
• Functie-overbelasting
  • Je kunt verschillende argumenten ondersteunen met dezelfde functienaam.

Door deze te gebruiken, kun je duidelijke en robuustere code in TypeScript schrijven.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video