Erweitern einer Schnittstelle mit verschachtelten Eigenschaften in TypeScript

1. Erweitern Sie eine Schnittstelle mit verschachtelten Eigenschaften mithilfe von TypeScript Intersection
2. Erweitern Sie eine Schnittstelle mit verschachtelten Eigenschaften mithilfe einer separaten Schnittstellenstruktur
3. Erweitern Sie eine Schnittstelle mit verschachtelten Eigenschaften, indem Sie die Produktschnittstelle generisch machen

Wenn wir Anwendungen entwickeln, erhalten wir möglicherweise eine neue Anforderung, die die vorhandene Struktur verwendet, aber neue Eigenschaften hinzufügt. Das Ändern der vorhandenen Struktur kann sich auf andere Module unserer Anwendung auswirken, und das Erstellen einer neuen Struktur kann zu Redundanz in unserem Code führen.

In diesem Lernprogramm lernen Sie die verschiedenen Methoden kennen, mit denen Sie Ihrer Basisstruktur neue Eigenschaften hinzufügen können, ohne sie an Ihre neuen Anforderungen anzupassen.

Um die in diesem Beispiel bereitgestellten Beispiele erfolgreich auszuführen, stellen Sie sicher, dass Sie TypeScript und Node Package Manager (npm) auf Ihrem Computer installiert haben.

Erweitern Sie eine Schnittstelle mit verschachtelten Eigenschaften mithilfe von TypeScript Intersection

In der Mengentheorie ist eine Schnittmenge eine Menge von Elementen, die gebildet wird, indem die Elemente erhalten werden, die in zwei Mengen gemeinsam sind. Eine Schnittmenge in TypeScript funktioniert auf die gleiche Weise, indem eine neue Struktur zurückgegeben wird, die aus den gemeinsamen Eigenschaften der sich schneidenden Strukturen besteht.

Um dieses Beispiel zu demonstrieren, öffnen Sie den Editor Visual Studio Code und erstellen Sie einen Ordner using-intersection.

Erstellen Sie in diesem Ordner eine Datei namens Product.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

export interface Product{
    productName: string
    productPrice: number
    productAddress:{
        houseNumber: number,
        streetName: string
    }
}

Die Datei Product.ts enthält eine Schnittstelle namens Product, und innerhalb dieser Schnittstelle haben wir eine Struktur namens productAddress definiert. Im nächsten Schritt fügen wir der Struktur eine neue Eigenschaft hinzu, ohne den obigen Code zu ändern.

Erstellen Sie im selben Ordner eine Datei namens NewProduct.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

import { Product } from "./Product";

export type NewProduct = Product &{
    productAddress:{
        zipCode: string
    }
}

let productInfo: NewProduct = {
    productName: "Nike - Air Max",
    productPrice: 500,
    productAddress:{
        houseNumber: 1233,
        streetName: "brooklyn street",
        zipCode: "1233"
    }
}

console.log(productInfo.productName)
console.log(productInfo.productPrice)
console.log(productInfo.productAddress)

Die Datei NewProduct.ts definiert einen neuen Schnittstellentyp namens NewProduct mit dem Schlüsselwort type. Der Typ NewProduct wird mit dem &-Symbol mit der Product-Schnittstelle verschnitten und fügt der Basisstruktur productAddress eine neue Eigenschaft namens zipCode hinzu.

Das Objekt productInfo enthält eine Instanz von NewProduct. Beachten Sie, dass die neue Struktur alle Eigenschaften der Basisstruktur und die Eigenschaft der geschnittenen Struktur hat.

Gehen Sie zu Ihrem Terminal und cd zum Speicherort des Ordners, um diesen Code auszuführen. Verwenden Sie den folgenden Befehl, um eine tsconfig.json-Datei für unsere Konfiguration zu generieren.

david@david-HP-ProBook-6470b:~/Documents/using-intersection$ tsc --init

Stellen Sie sicher, dass Sie die folgenden Konfigurationseigenschaften in der Datei tsconfig.json haben, die auf Ihrem Paket generiert wird.

{
    "compilerOptions":{
        "target": "es5"
        "noEmitOnError":true,
    }
}

Verwenden Sie den folgenden Befehl, um alle Ihre TypeScript-Dateien in Java-Dateien zu transpilieren.

david@david-HP-ProBook-6470b:~/Documents/using-intersection$ tsc

Verwenden Sie den folgenden Befehl, um das obige Beispiel auszuführen.

david@david-HP-ProBook-6470b:~/Documents/using-intersection$ node NewProduct.js

Ausgabe:

Nike - Air Max
500
{ houseNumber: 1233, streetName: 'brooklyn street', zipCode: '1233' }

Erweitern Sie eine Schnittstelle mit verschachtelten Eigenschaften mithilfe einer separaten Schnittstellenstruktur

Das Erstellen einer neuen Schnittstelle mit ihren Eigenschaften und das Erweitern der Basisschnittstelle ist die zweite Möglichkeit, der Basisstruktur Eigenschaften hinzuzufügen, ohne sie zu ändern.

Erstellen Sie einen Ordner mit dem Namen separate-interface und erstellen Sie eine Datei mit dem Namen ProductAddressStructure.ts im Ordner. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

export interface ProductAddressStructure{
    houseNumber: number
    streetName: string
}

Der obige Code definiert unsere Basisstruktur, der wir Eigenschaften hinzufügen möchten, ohne sie zu ändern. Erstellen Sie im selben Ordner eine Datei mit dem Namen Product.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

import { ProductAddressStructure } from "./ProductAddressStructure"

export interface Product{
    productName: string
    productPrice: number
    productAddress: ProductAddressStructure
}

Der obige Code definiert eine Product-Schnittstelle, die die Eigenschaften productName und productPrice hinzufügt. Wenn wir der Basisstruktur eine neue Eigenschaft hinzufügen möchten, ohne sie zu ändern, müssen wir eine neue Schnittstelle erstellen, die die neue Eigenschaft enthält, und die Basisstruktur erweitern.

Erstellen Sie im selben Ordner eine Datei mit dem Namen NewProductAddressStructure.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

import { ProductAddressStructure } from "./ProductAddressStructure";

export interface NewProductAddressStructure extends ProductAddressStructure{
    zipCode: string
}

Der obige Code erstellt eine neue Schnittstelle, die die Eigenschaft zipCode enthält, und erbt alle Eigenschaften von der Basisstruktur ProductAddressStructure.

Erstellen Sie im selben Ordner eine Datei mit dem Namen NewProduct.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

import { NewProductAddressStructure } from "./NewProductAddressStructure";
import { Product } from "./Product";

export interface NewProduct extends Product{
    productAddress: NewProductAddressStructure
}

let productInfo: NewProduct ={
    productName: "Nike - Air Max",
    productPrice: 500,
    productAddress: {
        zipCode: "1233",
        houseNumber: 345,
        streetName: "brooklyn street"
    }
}

console.log(productInfo.productName)
console.log(productInfo.productPrice)
console.log(productInfo.productAddress)

Die Datei NewProduct.ts definiert eine Schnittstelle namens NewProduct, die productName und productPrice von ProductPrice erbt. Das Interface NewProduct implementiert auch das NewAddressStructureInterface bestehend aus den Properties in der neuen Struktur und der geerbten Struktur.

Verwenden Sie die gleichen Schritte, die wir zum Ausführen des ersten Beispiels verwendet haben, um dieses Beispiel auszuführen.

Ausgabe:

Nike - Air Max
500
{ zipCode: '1233', houseNumber: 345, streetName: 'brooklyn street' }

Erweitern Sie eine Schnittstelle mit verschachtelten Eigenschaften, indem Sie die Produktschnittstelle generisch machen

Dieser Ansatz ähnelt dem obigen, außer dass die Schnittstelle Product generisch ist.

Erstellen Sie einen Ordner mit dem Namen generic-interface und erstellen Sie eine Datei mit dem Namen ProductAddressStructure.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

export interface ProductAddressStructure{
    houseNumber: number
    streetName: string
}

Die obige Schnittstelle erstellt die Basisstruktur, die zwei Eigenschaften enthält.

Erstellen Sie im selben Ordner eine Datei mit dem Namen Product.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

import { ProductAddressStructure } from "./ProductAddressStructure"

export interface Product<T extends ProductAddressStructure> {
    productName: string
    productPrice: number
    productAddress: T
}

Die Datei Product.ts definiert eine generische Schnittstelle namens Product. Die Schnittstelle wird die Implementierung auf Strukturen beschränken, die nur von der ProductAddressStrcture erben.

Die Schnittstelle enthält auch ein Feld namens productAddress, das in einen Typ der Instanz ProductAddressStructure aufgelöst wird.

Erstellen Sie im selben Ordner eine Datei namens NewProductAddressStructure.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

import { ProductAddressStructure } from "./ProductAddressStructure";

export interface NewProductAddressStructure extends ProductAddressStructure{
    zipCode: string
}

Die NewProductAddressStructure.ts definiert eine neue Schnittstelle namens NewProductAddressStructure, die alle Basiseigenschaften der ProductAddressStructure-Schnittstelle erbt.

Erstellen Sie im selben Ordner eine Datei mit dem Namen NewProduct.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

import { NewProductAddressStructure } from "./NewProductAddressStructure";
import { Product } from "./Product";

export interface NewProduct extends Product<NewProductAddressStructure>{

}

let productInfo: NewProduct = {
    productName: "Nike - Air Max",
    productPrice: 500,
    productAddress: {
        zipCode: "1233",
        houseNumber: 1233,
        streetName: "brooklyn street"

    }
}

console.log(productInfo.productName)
console.log(productInfo.productPrice)
console.log(productInfo.productAddress)

Die Datei NewProduct.ts definiert eine Schnittstelle namens NewProduct. Die NewProduct-Schnittstelle erbt alle Eigenschaften von Product, einschliesslich der generischen Struktur productAddress, die die Eigenschaft zipCode von der NewProductAddressStructure-Schnittstelle enthält.

Da die NewProductAddressStructure von der Basisstruktur ProductAddressStructure erbt, enthält die Schnittstelle NewProduct auch die Eigenschaften houseNumber und streetName.

Verwenden Sie die Schritte, mit denen wir den ersten Schritt ausgeführt haben, um dieses Beispiel auszuführen.

Ausgabe:

Nike - Air Max
500
{ zipCode: '1233', houseNumber: 1233, streetName: 'brooklyn street' }