Funktionsschnittstelle in TypeScript

Rana Hasnain Khan 15 Februar 2024
Funktionsschnittstelle in TypeScript

Wir werden eine Funktionsschnittstelle in TypeScript mit Beispielen vorstellen.

Schnittstelle als Funktionstyp in TypeScript

Die Schnittstelle ermöglicht es uns, eine übergeordnete Struktur zu erstellen, die in der gesamten Anwendung für bestimmte Klassen oder Funktionen verwendet wird. Jede Änderung der Struktur in einer beliebigen Phase der Anwendung führt zu einem Fehler.

Die Schnittstelle kann die spezifische Struktur von Eigenschaften, von Funktionen zurückgegebenen Objekten oder als Parameter übergebenen Objekten validieren. Wir können eine Schnittstelle einfach mit dem Schlüsselwort interface definieren und die Eigenschaften und die Methode einbeziehen.

Wir können Methoden mit der Funktion oder einer Pfeilfunktion deklarieren. Sehen wir uns, wie unten gezeigt, ein Beispiel an und erstellen eine Schnittstelle für Kurse.

Code:

# typescript
interface CsCourse {
    subCode: number;
    subName: string;
    instructor(id): string;
    getCgpa: (number) => number;
}

Lassen Sie uns diese Schnittstelle für unsere Funktionen verwenden.

Code:

# typescript
interface Course
{
    (subCode: number, subName: string): void;
};
function addSub(subCode:number, subName:string):void {
    console.log('Adding Subject: Subject Code = ' + subCode + ', Subject Name = ' + subName)
}

function updateSub(subCode:number, subName:string):void {
    console.log('Updating Subject: Subject Code = ' + subCode + ', Subject Name = ' + subName)
}

let sub: Course = addSub;
sub(301, 'Compiler Construction');

sub = updateSub;
sub(101, 'Introduction to Programming');

Ausgang:

Funktionsschnittstellenbeispiel in Typoskript

Indem wir eine Schnittstelle erstellen, können wir der Struktur der Eigenschaften oder Funktionen folgen und sicherstellen, dass die gleiche Struktur in der gesamten Anwendung verwendet wird. Die Verwendung von Schnittstellen für diese Eigenschaften macht unsere Anwendung sicher, und wir können sicherstellen, dass die richtigen Daten an die Funktionen gesendet werden.

Lassen Sie uns nun versuchen, eine neue Funktion mit einer anderen Signatur als der Signatur zuzuweisen, die wir im Schnittstellenkurs definiert haben.

Code:

# typescript
function delSub(subCode:number):void {
    console.log('Subject deleted.')
}

let sub: Course = delSub;

Der obige Code gibt den Compilerfehler aus.

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

Verwandter Artikel - TypeScript Interface