Funktionen in TypeScript

1. Funktionsdefinition

1.1 Funktionen in JavaScript

Bevor wir uns mit den Funktionen in TypeScript befassen, sehen wir uns die folgenden häufig verwendeten Funktionsdefinitionen in JavaScript an:

Die erste Methode: Deklarieren Sie eine Funktion mit dem Schlüsselwort function

Funktion add1 (x, y) {
    Rückgabewert x + y
}

Zweite Methode: Funktionen mit Literalwerten deklarieren

const add2 = Funktion (x, y) {
    Rückgabewert x + y
}

Die dritte Methode: Verwenden von Pfeilfunktionen zum Deklarieren von Funktionen

const add3 = (x, y) => {
    Rückgabewert x + y
}

1.2 Funktionen in TypeScript

Die Funktionsdeklarationsmethode in TS ähnelt der in JS. Der einzige Unterschied besteht darin, dass der Parametertyp und der Rückgabewerttyp festgelegt sind. Wenn kein Rückgabewert vorhanden ist, muss der Rückgabewerttyp void sein, anstatt ihn leer zu lassen.

Als nächstes verwenden wir TS, um die drei oben genannten Funktionen erneut zu deklarieren:

Die erste Methode besteht darin, das Funktionsschlüsselwort zum Deklarieren der Funktion zu verwenden:

/*
 Der syntaktische Aufbau ist wie folgt: Funktion Funktionsname (Parameter 1: Typ, Parameter 2: Typ, ...): Rückgabewert Typ {
     Funktionskörper}
 */
Funktion add4(x: Zahl, y: Zahl): Zahl {
    Rückgabewert x + y
}

Zweite Methode: Funktionen mit Literalwerten deklarieren

/*
 Der syntaktische Aufbau ist wie folgt: const Funktionsname = Funktion (Parameter 1: Typ, Parameter 2: Typ,...): Rückgabewert Typ {
     Funktionskörper}
 */
const add5 = Funktion (x: Zahl, y: Zahl): Zahl {
    Rückgabewert x + y
}

Die dritte Methode: Verwenden von Pfeilfunktionen zum Deklarieren von Funktionen

/*
 Der syntaktische Aufbau ist wie folgt: const Funktionsname = (Parameter 1: Typ, Parameter 2: Typ,...): Rückgabewert Typ => {
     Funktionskörper}
 */
// 3. Verwenden Sie die Pfeilfunktion, um die Funktion const add6 = (x: Zahl, y: Zahl) zu deklarieren: Zahl => {
    Rückgabewert x + y
}

Oben wird beschrieben, wie Funktionen in TS deklariert werden. Es gibt auch eine Situation der Parameterentkopplungszuweisung in JS. Wie wird der Parametertyp in TS angegeben? Der Beispielcode lautet wie folgt:

const add7 = ({ x, y }: { x: Zahl; y: Zahl }): Zahl => {
    Rückgabewert x + y
}

Es gibt auch eine besser lesbare Schreibweise in TS, wie unten gezeigt:

const add8: (Basiswert: Zahl, Inkrement: Zahl) => Zahl = Funktion (
    x: Zahl,
    y: Zahl
): Nummer {
    Rückgabewert x + y
}

Diese Methode teilt die Funktion in zwei Teile. Der erste Teil ist der Rückgabewerttyp der Funktion und der zweite Teil ist der Ort, an dem die Funktion definiert wird.

Tatsächlich dient die erste Hälfte nur dazu, die Lesbarkeit des Codes zu verbessern und hat keine große praktische Bedeutung.

2. Optionale Parameter und Standardparameter

Jede Funktion in TypeScript wird benötigt. Dies bedeutet nicht, dass null und undefined nicht als Parameter übergeben werden können, sondern ob für jeden Parameter ein Wert übergeben wird. Wenn keine Eins-zu-eins-Entsprechung besteht, wird eine Ausnahme ausgelöst. Einfach ausgedrückt ist die Anzahl der formalen Parameter gleich der Anzahl der tatsächlichen Parameter.

Der Beispielcode lautet wie folgt:

Funktion add(x: Zahl, y: Zahl): Zahl {
    Rückgabewert x + y
}
let result1 = add(1) // 2 Argumente erwartet, aber 1 bekommen.
lass result2 = add(1, 2)
let result3 = add(1, 2, 3) // 2 Argumente erwartet, aber 3 bekommen

In JS ist jeder Parameter optional und kann übergeben werden oder nicht. Wenn er nicht übergeben wird, ist er der Standardwert undefined .

Dies ist auch in TS möglich. Wir müssen nur ? nach dem Parameternamen hinzufügen, um die optionale Parameterfunktion zu implementieren.

Der folgende Code:

// Optionale Parameterfunktion implementieren // Fügen Sie einfach ein ? neben dem Parameternamen hinzu function add(x: number, y?: number): number {
  Rückgabewert x + y
}
sei result1 = add(1)
lass result2 = add(1, 2)
// let result3 = add(1, 2, 3) // 2 Argumente erwartet, aber 3 bekommen

Der obige Code implementiert optionale Parameter

Die Implementierung von Standardparametern in TS ist dasselbe wie die Implementierung von Standardparametern in JS. Sie müssen ihnen lediglich Werte zuweisen.

Der Beispielcode lautet wie folgt:

;(Funktion () {
  Funktion add(x: Zahl, y: Zahl = 2): Zahl {
    Rückgabewert x + y
  }
  let result1 = add(1) // 3
  let result2 = add(1, 2) // 3
})()

Wenn Sie für y keinen Typ angeben, ist es natürlich genau dasselbe wie in JS.

3. Verbleibende Parameter

Die sogenannten verbleibenden Parameter liegen vor, wenn bei der Definition der Funktion zwei Parameter übergeben werden müssen, beim Aufruf der Funktion jedoch drei Parameter übergeben werden. Zu diesem Zeitpunkt gibt es einen zusätzlichen Parameter, der der verbleibende Parameter ist.

In JS können wir arguments verwenden, um auf zusätzliche übergebene Parameter zuzugreifen. Wie greifen Sie also auf die verbleibenden Parameter in TS zu?

Tatsächlich können in TS alle Parameter in einer Variablen gespeichert werden, die eigentlich ein entkoppeltes Array ist.

Der Beispielcode lautet wie folgt:

Funktion fun(x: Zahl, ...Zahlen: Zahl[]): void {
    console.log(Zahlen)
}
spaß(1, 2, 3, 4) // [ 2, 3, 4 ]

Dies ist das Ende dieses Artikels über Funktionen in TypeScript. Weitere relevante Inhalte zu TypeScript-Funktionen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!