Funktioner i TypeScript

Denne artikel forklarer funktioner i TypeScript.

YouTube Video

Funktioner i TypeScript

Funktioner i TypeScript er JavaScript-funktioner med tilføjede typeannoteringer. I TypeScript kan du skrive mere robust kode ved klart at definere typerne af input (parametre) og output (returværdier) for funktioner. Nedenfor introducerer vi de grundlæggende metoder til at definere funktioner og nogle egenskaber ved funktioner i TypeScript.

Grundlæggende funktionsdefinition

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

• Funktionen add tager to argumenter af typen number og returnerer en værdi af typen number.
• Den tager to argumenter, x og y, begge af typen number, hvor deres typer er eksplicit angivet.
• Returtypen er også angivet som : number.

Anonyme funktioner (Funktionsudtryk)

Anonyme funktioner og funktionsudtryk kan også bruges i TypeScript. Typer kan annoteres på samme måde.

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

• Du kan tildele en anonym funktion til en variabel og kalde den senere.

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

• Du kan bruge et navngivet funktionsudtryk for at muliggøre rekursive kald.

Pilesyntaks-funktioner

Typeannoteringer kan også bruges med pilesyntaks-funktioner.

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

Denne kode definerer en pilfunktion subtract med typeangivelser, som tager to tal som argumenter og returnerer deres forskel.

Valgfrie og standardparametre

Parametre kan gøres valgfrie eller tildeles standardværdier.

Valgfrie parametre

Tilføjelse af ? efter parameternavnet gør det valgfrit.

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

Denne kode accepterer et valgfrit argument; hvis argumentet gives, hilser den med navnet, ellers returnerer den en generisk hilsen.

Standardparametre

Du kan også angive standardværdier for parametre.

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

Denne funktion bruger "Guest" som standardværdi, hvis intet argument gives, og hilser med det angivne eller standardnavn.

Funktions typedefinition

Det er også muligt at definere typen af selve funktionen. For eksempel bruges dette, når man sender en funktion som et 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

Denne kode definerer en funktionstype Operation, der tager to tal og returnerer et tal, og bruger den derefter til at oprette og udføre additions- og multiplikationsfunktioner.

Når der ikke er nogen returværdi (void-type)

For funktioner uden returværdi, angiv typen void.

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

Denne kode definerer en void-funktion logMessage, som tager en strengbesked og udskriver den til konsollen uden at returnere en værdi.

Callback-funktion

At give en funktion som et argument til en anden funktion og få den udført senere kaldes en callback-funktion. Det bruges ofte i asynkron behandling og hændelseshåndtering.

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});

I dette eksempel gives en funktion, der sender en værdi til konsollen, som en callback-funktion.

Alternativt kan du definere en callback-type ved hjælp af type eller 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});

At definere en callback-type med type eller interface forbedrer genanvendeligheden.

Funktion Overloading

Funktionsoverbelastning giver dig mulighed for at definere funktioner med det samme navn, men med forskellige parameterlister. I TypeScript kan du definere flere funktioner med samme navn og udføre forskellige operationer baseret på typerne og antallet af parametre.

 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

I TypeScript opnås overloading som følger:.

• Overload Signatur

  • Definerer hvordan funktionen kan bruges (dens signatur). Ved at skrive dette flere gange bliver overloading muligt.

• Implementeringssignatur

  • Implementerer selve funktionens krop. Denne del defineres kun én gang og håndterer alle tilfælde, der er erklæret i overload-signaturerne.

Regler for Overloading

Følgende regler gælder for funktion overloading:.

• Rækkefølge for Overload Signaturdefinitioner

  • Da evalueringen sker fra top til bund, anbefales det at definere specifikke typer først, efterfulgt af mere generiske typer.

• Kompatibilitet af Implementeringssignaturen

  • Implementeringssignaturen skal være kompatibel med argumenterne og returværdierne for alle overlappende signaturer.

• Angiv detaljer i overlappende signaturer

  • Implementeringssignaturen har en tendens til at være tvetydig, så detaljer bør angives i de overlappende signaturer.
  • Hvis kun implementeringssignaturen er defineret, vil typeinferensen for funktionen være utilstrækkelig.

Sammendrag

Funktioner i TypeScript har følgende karakteristika.

• Typeannotationer
  • Ved at angive typer for argumenter og returneringsværdier kan du skrive mere sikker kode.
• Anonyme funktioner og pilfunktioner
  • De kan bruges ligesom i JavaScript, og ved at tilføje typeannotationer forbedres typesikkerheden.
• Valgfrie og standardparametre
  • Du kan gøre argumentangivelse mere fleksibel efter behov.
• Funktionstypedefinitioner
  • Definér typen for selve funktionen for at udføre typekontrol.
• Funktionsoverbelastning
  • Du kan understøtte forskellige argumenter med det samme funktionsnavn.

Ved at anvende disse, kan du skrive mere klar og robust kode i TypeScript.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video