Funksjoner i TypeScript

Denne artikkelen forklarer funksjoner i TypeScript.

YouTube Video

Funksjoner i TypeScript

Funksjoner i TypeScript er JavaScript-funksjoner med tillegg av typeannotasjoner. I TypeScript kan du skrive mer robust kode ved å tydelig definere typene for input (parametere) og output (returverdier) for funksjoner. Nedenfor introduserer vi de grunnleggende metodene for å definere funksjoner og noen egenskaper ved funksjoner i TypeScript.

Grunnleggende funksjonsdefinisjon

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

• add-funksjonen tar to argumenter av typen number og returnerer en verdi av typen number.
• Den tar to argumenter, x og y, begge av typen number, med typene eksplisitt spesifisert.
• Returtypen er også spesifisert som : number.

Anonyme funksjoner (funksjonsuttrykk)

Anonyme funksjoner og funksjonsuttrykk kan også brukes i TypeScript. Typer kan annoteres på samme måte.

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 funksjon til en variabel og kalle 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 bruke et navngitt funksjonsuttrykk for å tillate rekursive kall.

Pilkefunksjoner

Typeannotasjoner kan også brukes med pilkefunksjoner.

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

Denne koden definerer en pilfunksjon subtract med typeannotasjoner som tar to tall som argumenter og returnerer differansen deres.

Valgfrie og standardparametere

Parametere kan gjøres valgfrie eller gis standardverdier.

Valgfrie parametere

Å legge til ? etter parameterens navn gjør den valgfri.

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

Denne koden aksepterer et valgfritt argument; hvis argumentet er gitt, hilser den med navnet, ellers returnerer den en generell hilsen.

Standardparametere

Du kan også angi standardverdier for parametere.

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

Denne funksjonen bruker "Guest" som standardverdi hvis ingen argumenter sendes, og hilser med det angitte eller standard navnet.

Funksjonstypedefinisjon

Det er også mulig å definere selve funksjonens type. For eksempel brukes dette når du sender en funksjon 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 koden definerer en funksjonstype Operation som tar to tall og returnerer et tall, og bruker den deretter til å lage og kjøre addisjons- og multiplikasjonsfunksjoner.

Når det ikke er noen returverdi (void-type)

For funksjoner uten returverdi, spesifiser void-typen.

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

Denne koden definerer en void-funksjon logMessage som tar en tekstmelding og skriver den ut til konsollen uten å returnere en verdi.

Tilbakekallingsfunksjon

Å sende en funksjon som et argument til en annen funksjon og få den utført senere kalles en tilbakekallingsfunksjon. Det brukes ofte i asynkron behandling og hendelseshå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 eksempelet sendes en funksjon som skriver ut en verdi til konsollet som en tilbakekallingsfunksjon.

Alternativt kan du definere en tilbakekallingstype ved å bruke 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});

Å definere en tilbakekallingstype ved hjelp av type eller interface forbedrer gjenbrukbarheten.

Funksjonsoverbelastning

Funksjonsoverbelastning lar deg definere funksjoner med samme navn, men med ulike parameterlister. I TypeScript kan du definere flere funksjoner med samme navn og utføre forskjellige operasjoner basert på typer og antall parametere.

 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 oppnås overbelastning på følgende måte:.

• Overbelastningssignatur

  • Definerer hvordan funksjonen kan brukes (dens signatur). Ved å skrive dette flere ganger blir overbelastning mulig.

• Implementeringssignatur

  • Implementerer selve funksjonskroppen. Denne delen defineres bare én gang og håndterer alle tilfeller som er erklært i overbelastningssignaturene.

Regler for overbelastning

Følgende regler gjelder for funksjonsoverbelastning:.

• Rekkefølge på overbelastningssignaturer

  • Siden evalueringen skjer ovenfra og ned, anbefales det å definere spesifikke typer først, etterfulgt av mer generiske typer.

• Kompatibilitet med implementeringssignaturen

  • Signaturen til implementasjonen må være kompatibel med argumentene og returverdiene til alle overbelastede signaturer.

• Spesifiser detaljer i overbelastede signaturer

  • Signaturen til implementasjonen har en tendens til å være tvetydig, så detaljer bør spesifiseres i de overbelastede signaturene.
  • Hvis bare implementasjonssignaturen er definert, vil typeinformasjonsinferansen for funksjonen være utilstrekkelig.

Sammendrag

Funksjoner i TypeScript har følgende egenskaper.

• Typeannotasjoner
  • Ved å spesifisere typer for argumenter og returverdier kan du skrive tryggere kode.
• Anonyme funksjoner og pilfunksjoner
  • De kan brukes akkurat som i JavaScript, og ved å legge til typeannotasjoner forbedres typesikkerheten.
• Valgfrie og standard parametere
  • Du kan gjøre argumentspesifikasjonen mer fleksibel etter behov.
• Funksjonstypedefinisjoner
  • Definer typen for selve funksjonen for å utføre typekontroll.
• Funksjonsoverlasting
  • Du kan støtte ulike argumenter med samme funksjonsnavn.

Ved å bruke dette kan du skrive klarere og mer robust kode i TypeScript.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video