Funktioner i TypeScript

Den här artikeln förklarar funktioner i TypeScript.

YouTube Video

Funktioner i TypeScript

Funktioner i TypeScript är JavaScript-funktioner med tillagda typnoteringar. I TypeScript kan du skriva mer robust kod genom att tydligt definiera typerna för indata (parametrar) och utdata (returvärden) för funktioner. Nedan introducerar vi de grundläggande metoderna för att definiera funktioner och några egenskaper hos funktioner i TypeScript.

Grundläggande funktiondefinition

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

• Funktionen add tar två argument av typen number och returnerar ett värde av typen number.
• Den tar två argument, x och y, båda av typen number, där typerna är explicit angivna.
• Returtypen är också specificerad som : number.

Anonyma funktioner (Funktionsuttryck)

Anonyma funktioner och funktionsuttryck kan också användas i TypeScript. Typer kan noteras på samma sätt.

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

• Du kan tilldela en anonym funktion till en variabel och anropa den senare.

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 använda ett namngivet funktionsuttryck för att möjliggöra rekursiva anrop.

Pillfunktioner

Typnoteringar kan också användas med pilfunktioner.

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

Den här koden definierar en pilfunktion subtract med typangivelser som tar två tal som argument och returnerar deras differens.

Valfria och standardparametrar

Parametrar kan göras valfria eller få standardvärden.

Valfria parametrar

Genom att lägga till ? efter parameterns namn gör du den valfri.

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

Den här koden accepterar ett valfritt argument; om argumentet ges hälsar den med namnet, annars returnerar den en generell hälsning.

Standardparametrar

Du kan också ställa in standardvärden för parametrar.

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

Den här funktionen använder "Guest" som standardvärde om inget argument anges och hälsar med det angivna eller standardnamnet.

Funktionstypedefinition

Det är också möjligt att definiera typen för själva funktionen. Detta används till exempel när du skickar en funktion som ett 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

Den här koden definierar en funktionstyp Operation som tar två tal och returnerar ett tal, och använder den sedan för att skapa och köra additions- och multiplikationsfunktioner.

När det inte finns något returvärde (void-typ)

För funktioner utan returvärden, ange void-typen.

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

Den här koden definierar en void-funktion logMessage som tar ett strängmeddelande och skriver ut det till konsolen utan att returnera ett värde.

Callbackfunktion

Att skicka en funktion som ett argument till en annan funktion och låta den köras senare kallas en callbackfunktion. Det används ofta vid asynkron bearbetning och händelsehantering.

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 det här exemplet skickas en funktion som skriver ut ett värde till konsolen som en callbackfunktion.

Alternativt kan du definiera en callback-typ med hjälp av 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});

Att definiera en callback-typ med hjälp av type eller interface förbättrar återanvändbarheten.

Funktionöverlagring

Funktionsöverlagring gör det möjligt att definiera funktioner med samma namn men med olika parameterlistor. I TypeScript kan du definiera flera funktioner med samma namn och utföra olika operationer baserat på typer och antal av parametrar.

 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 uppnås överlagring enligt följande:.

• Överlagringssignatur

  • Definierar hur funktionen kan användas (dess signatur). Genom att skriva detta flera gånger blir överlagring möjlig.

• Implementeringssignatur

  • Implementerar den faktiska funktionens kodblock. Den här delen definieras bara en gång och hanterar alla fall som anges i överlagringssignaturerna.

Regler för överlagring

Följande regler gäller för funktionöverlagring:.

• Ordning för överlagringssignaturdefinitioner

  • Eftersom utvärdering sker uppifrån och ned rekommenderas det att börja med att definiera specifika typer följt av mer generiska typer.

• Kompatibilitet för implementeringssignaturen

  • Implementeringssignaturen måste vara kompatibel med argumenten och returvärdena för alla överbelastningssignaturer.

• Ange detaljer i överbelastningssignaturer

  • Implementeringssignaturen tenderar att vara tvetydig, så detaljer bör anges i överbelastningssignaturerna.
  • Om endast implementeringssignaturen är definierad, kommer typinferensen för funktionen att vara otillräcklig.

Sammanfattning

Funktioner i TypeScript har följande egenskaper.

• Typanoteringar
  • Genom att ange typer för argument och returvärden kan du skriva säkrare kod.
• Anonyma funktioner och pilfunktioner
  • De kan användas precis som i JavaScript, och att lägga till typanoteringar förbättrar typsäkerheten.
• Valfria och standardparametrar
  • Du kan göra argumenthanteringen mer flexibel vid behov.
• Funktionstypdefinitioner
  • Definiera funktionens egen typ för att utföra typkontroll.
• Funktionsöverlagring
  • Du kan stödja olika argument med samma funktionsnamn.

Genom att använda dessa kan du skriva tydligare och mer robust kod i TypeScript.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video