Erweitern Sie den Typ in TypeScript

Rana Hasnain Khan 21 Juni 2023
Erweitern Sie den Typ in TypeScript

Dieser Artikel hilft uns anhand einiger Beispiele zu verstehen, wie man Typ in TypeScript erweitert.

Erweitern Sie den Typ in TypeScript

Leider ist es in TypeScript nicht möglich, Typen zu erweitern. Wir können nur Interface und class erweitern.

Wir können Schnittstellen oder Klassen verwenden, um Typen zu spezifizieren und sie zu erweitern. Wir werden Beispiele durchgehen und versuchen, die Schnittstelle für Typen zu erweitern.

Wir haben eine Schnittstelle namens Project, die zwei unten beschriebene Methoden enthält.

Einer heißt submit() und der zweite queue().

interface Project {
    submit(data: string): boolean
    queue(data: string): boolean
}

Wir haben viele Klassen, die die Projekt-Schnittstelle verwenden. Wir müssen eine neue Methode für die Schnittstelle Projekt verwenden, die keine Anforderungen stellt.

Requirements(data: string, id: number): void

Wenn wir den aktuellen Code mit der project-Schnittstelle brechen wollen, bietet TypeScript eine later()-Methode, die verwendet werden kann. Wir können eine neue Schnittstelle erstellen, die die Schnittstelle Projekt erweitert, indem wir dies vermeiden.

interface ProjectManagement extends Project {
    Requirements(data: string, id: number): boolean
}

Wir können das Schlüsselwort extends verwenden, um eine Schnittstelle mit dieser Syntax zu erweitern.

interface D {
    d(): void
}
interface K extends D {
    k(): void
}

Die Schnittstelle K erweitert die Schnittstelle D. Beide haben Methoden d() und k().

Die ProjectManagement-Schnittstelle übernimmt wie Klassen die beiden Methoden submit() und queue() von der project-Schnittstelle.

class PM implements ProjectManagement {
    Requirements(data: string, id: number): boolean {
        console.log(`Send data to ${id} in ${sec} ms.`);
        return true;
    }
    submit(data: string): boolean {
        console.log(`Sent data to ${id} after ${sec} ms. `);
        return true;
    }
    queue(data: string): boolean {
        console.log(`Queue an project to ${id}.`);
        return true;
    }
}

Schnittstellen Erweitern mehrerer Schnittstellen in TypeScript

Eine Schnittstelle kann viele Schnittstellen erweitern und eine Mischung aus allen Schnittstellen erstellen. Lassen Sie uns anhand eines Beispiels diskutieren.

interface A {
    a(): void
}
interface E {
    e(): void
}
interface M extends E, A {
    m(): void
}

Wir können sehen, dass die Schnittstelle M die Schnittstellen E und A erweitert. M hat alle Schnittstellenmethoden E und A, a() und e().

Schnittstellen, die Klassen in TypeScript erweitern

Das Interface übernimmt die Eigenschaften und Methoden der Klasse. TypeScript gewährt eine Schnittstelle zum Erweitern einer Klasse.

Die Schnittstelle übernimmt die privaten und geschützten Mitglieder der Klasse. Die Schnittstelle kann nicht nur öffentliche Member übernehmen.

Die Schnittstelle dieser Klasse kann nur von der Klasse oder Unterklasse implementiert werden, von der die Schnittstelle ausgeht. Es bedeutet, wenn eine Schnittstelle eine Klasse mit privaten oder geschützten Mitgliedern erweitert.

Wenn wir die Schnittstelle aus einer Klasse implementieren, die keine Unterklasse dieser Klasse ist, die die Schnittstelle übernimmt, erhalten wir einen Fehler.

Hier ist ein Beispiel unten.

class Key {
    private value: boolean;
}
interface Lock extends Key {
    enable(): void
}
class FingerPrint extends Key implements Lock {
    enable() { }
}
class Notification extends Key implements Lock {
    enable() { }
}
class Identity extends Key { }{
    enable() { }
}

Eine Schnittstelle kann eine oder mehrere vorhandene Schnittstellen erweitern. Die Klasse oder Unterklasse kann nur die Schnittstelle dieser Klasse implementieren.

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