ts von Grund auf - Tag 05

Beginnen Sie noch heute mit dem Erlernen einer sehr wichtigen Objektfunktion in js und sogar ts

In js kann eine Funktion auf zwei Arten deklariert werden: Funktionsausdruck und Funktionsdeklaration

// 函数声明
function sum(x, y) {
    return x + y;
}

// 函数表达式
let mySum = function (x, y) {
    return x + y;
};

In ts müssen die Eingabe und Ausgabe einer Funktion eingeschränkt werden, zum Beispiel:

function sum(x: number, y: number): number {
    return x + y;
}

//多一个参数或少一个参数都是不可以的

sum(1, 2, 3);  //报错
sum(1)  // 报错

Das Folgende ist ein Funktionsausdruck zum Deklarieren einer Funktion

let mySum = function (x: number, y: number): number {
    return x + y;
};

Dies kann kompiliert werden, aber tatsächlich definiert der obige Code nur die Typdefinition der anonymen Funktion auf der rechten Seite des Gleichheitszeichens, während die Typdefinition auf der linken Seite des Gleichheitszeichens durch die Typinferenz der Zuweisung abgeleitet mySumwird Betrieb. Wenn wir den Typ manuell hinzufügen müssen mySum , sollte es so aussehen:

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

In der Typdefinition von TypeScript => wird es zur Darstellung der Definition einer Funktion verwendet. Die linke Seite ist der Eingabetyp, der in Klammern eingeschlossen werden muss, und die rechte Seite ist der Ausgabetyp. Nicht zu verwechseln mit Pfeilfunktionen in ES6

Definieren Sie die Form einer Funktion mithilfe einer Schnittstelle

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

Typbeschränkungen auf der linken Seite des Gleichheitszeichens können sicherstellen, dass die Anzahl der Parameter, Parametertypen und Rückgabewerttypen bei der zukünftigen Zuweisung von Werten an Funktionsnamen unverändert bleibt.

optionale Parameter

Verwenden Sie außerdem, ähnlich wie optionale Eigenschaften in Schnittstellen, ? optionale Parameter:

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

Es ist zu beachten, dass auf optionale Parameter keine obligatorischen Parameter folgen können

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');

Derzeit ist die Einschränkung durch „Auf optionale Parameter müssen erforderliche Parameter folgen“ beschränkt.

verbleibende Parameter

ES6 verwendet ...rest, um die verbleibenden Parameter darzustellen

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a: any[] = [];
push(a, 1, 2, 3);
//起始items就是一个数组，我们可以用数组的类型来定义他


function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);
//rest参数只能是最后一个参数

Überlast

Durch Überladen kann eine Funktion unterschiedliche Zahlen oder Arten von Argumenten unterschiedlich behandeln.

Beispielsweise müssen wir eine Funktion implementieren , die bei reverseder Eingabe einer Zahl 123 eine umgekehrte Zahl ausgibt und bei der Eingabe 321einer Zeichenfolge 'hello' eine umgekehrte Zeichenfolge ausgibt 'olleh'.

Mit Union-Typen können wir Folgendes tun:

function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

Dies hat jedoch den Nachteil, dass es nicht genau ausgedrückt werden kann. Wenn die Eingabe eine Zahl ist, sollte die Ausgabe auch eine Zahl sein, und wenn die Eingabe eine Zeichenfolge ist, sollte die Ausgabe auch eine Zeichenfolge sein.

Zu diesem Zeitpunkt ist es Zeit zum Neuladen.

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

Im obigen Beispiel haben wir die Funktion mehrmals definiert reverse, die ersten Male waren Funktionsdefinitionen und das letzte Mal war die Funktionsimplementierung. In den Codehinweisen des Editors sind die ersten beiden Hinweise korrekt zu erkennen.

Beachten Sie, dass TypeScript dem Abgleich mit der ersten Funktionsdefinition Priorität einräumt. Wenn also mehrere Funktionsdefinitionen eine Einschlussbeziehung haben, müssen Sie zuerst die genaue Definition schreiben.

Danke an: tsblog

ts von Grund auf - Tag 05

추천