Kommentieren von Funktionen in Typescript

Die einfachste Art, eine Funktion in Typoskript mit Anmerkungen zu versehen, ist wie folgt

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}

Optionale Parameter werden mit Fragezeichen versehen param? so

function optional(a: number, b?: number){
    console.log(a)
}

Aber was ist mit Rückruffunktionen oder Funktionen, bei denen der Typ der Argumente und die Rückgabetypen in Beziehung stehen (in diesem Fall generisch).

---

Funktionswerte

Beobachten Sie diese JavaScript-Funktion

function multiplier(factor){
    return value => factor * value
}

damit wir die Funktion so nutzen können;

const n  = multiplier(6)
n(8) // 48

Funktionswerte werden in Typoskript wie folgt mit Anmerkungen versehen

(param1: type, param2: type)=> type

// or

const add: (a: number, b: number)=> number = function (a, b){
    return a + b
}

Um die Multiplikatorfunktion zu kommentieren, haben wir

function multiplier(factor: number): (value: number) => number{
    return value => factor * value
}

Ihr IDE (vorzugsweise) VSCode leitet automatisch den Werttyp (als Zahl) in der Funktionslogik ab

---

Generische Funktionen

Diese Funktionsanmerkung ist falsch

function pickFirst(array: Array<T>): T{
    return array[0]
}

Natürlich löst dies einen Fehler aus
Name T

kann nicht gefunden werden

Daher ist das Format zum Kommentieren allgemeiner Funktionen

function fnName <T,U>(param: T): U{
    //logic
}

Beobachten Sie, wo die generischen Namen deklariert wurden. also, um die obige Funktion korrekt zu kommentieren;

function pickFirst<T>(array: Array<T>): T{
    return array[0]
}

Jetzt funktioniert das.

Aber was ist mit generischen Funktionen, die Funktionsparameter haben?

Zum Beispiel möchten wir eine benutzerdefinierte Kartenfunktion namens myMap mit Anmerkungen versehen, die so in Javascript geschrieben wurde

function myMap(arr, fn){
    rreturn arr.map(fn)
}

Wir können es so kommentieren

function myMap<Input, Output>(arr: Input[], fn: (item: Input, index?: number) => Output): Output[]{
    return arr.map(fn)
}

Was wir im obigen Snippet beachten sollten, ist, dass die fn-Funktion ein Element desselben Typs des Eingabearrays nimmt und einen Ausgabetyp zurückgibt.

Was ist mit der statischen Array.from()-Methode?

function myFrom<Type>(iterable: Iterable<Type>): Array<Type>{
    // logic
}

oder die Methode array.filter()?

function myFilter<Input>(arr: Input[], fn: (item: Input) => boolean): Input[]{
    return arr.filter(fn)
}

Allgemeine Einschränkungen

Sie können generische Variablen auch auf Typen beschränken, die eine bestimmte Eigenschaft haben. Zum Beispiel

function pickInnerFirst<T extends {length: number}>(array: Array<T>): T{
    return array[0][0]
}

Diese Funktion wählt das allererste Element in einem zweidimensionalen Array aus

Dadurch wird sichergestellt, dass es nur für Arrays und Strings (meistens) so funktioniert, dass

pickOne([12, 20, 30]) // wont work.

Wir können auch Schnittstellen
verwenden

interface Lengthly{
    length: number;
}

function pickInnerFirst<T extends Lengthly>(array: Array<T>): T{
    return array[0][0]
}

---

Funktionsschnittstellen

Falls Sie es nicht wissen: Funktionen sind Objekte und sie haben Eigenschaften

const add = (a, b) => a + b

console.log(add.toString()) //(a, b) => a + b

// also
console.log(Object.getPrototypeOf(add) == Function.prototype) //true
console.log(Object.getPrototypeOf(Function.prototype) == Object.prototype) //true

Das zweite Beispiel zeigte, dass die Add-Funktion ein untergeordnetes Element von Object.prototype ist (obwohl es kein direktes untergeordnetes Element ist) und daher ein Objekt ist.

LustigerweiseSie können in JavaScript Eigenschaften an eine Funktion anhängen

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}

Dieses Snippet wird zurückgegeben

function optional(a: number, b?: number){
    console.log(a)
}

Beachten Sie, dass wir bei A eine Eigenschaft namens Beschreibung an die Funktion angehängt haben, die nur mit Objekten möglich sein kann.

Das ist die Schlussfolgerung;

Objekte können mit Schnittstellen beschrieben werden (normalerweise). Für Funktionen ist dies auch möglich. Dies ist jedoch nur etwas, das Sie berücksichtigen sollten, wenn Sie Ihren Funktionen spezielle Eigenschaften hinzufügen.

function multiplier(factor){
    return value => factor * value
}

Im Kommentar A beschreiben wir die Argumente und Rückgabetypen der Funktion.

Um also den früheren Code im Typoskript mit Anmerkungen zu versehen,

const n  = multiplier(6)
n(8) // 48

Beobachten Sie, wie wir die Schnittstelle in der Shout-Funktion bei A. verwendet haben.

---

Warum sollte ich verstehen, wie man Funktionen in Typescript mit Anmerkungen versehen kann?

Nun, es hilft beim Aufbau eines viel intelligenteren Typsystems, was wiederum das Risiko von Fehlern verringert. Wenn Sie eine Bibliothek oder ein Framework erstellen, müssen Sie möglicherweise einige oder die meisten der hier genannten Konzepte verwenden.
Wenn Sie nur Bibliotheken verwenden, sind diese Konzepte nicht wirklich notwendig, obwohl sie Ihnen ein viel tieferes Verständnis der Bibliotheken vermitteln können, mit denen Sie arbeiten.

Wenn Sie Fragen haben oder Fehler in diesem Text enthalten sind, teilen Sie diese gerne in den Kommentaren unten mit ⭐

Das obige ist der detaillierte Inhalt vonKommentieren von Funktionen in Typescript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!