Erweitern einer Schnittstelle mit verschachtelten Eigenschaften in TypeScript
- Erweitern Sie eine Schnittstelle mit verschachtelten Eigenschaften mithilfe von TypeScript Intersection
- Erweitern Sie eine Schnittstelle mit verschachtelten Eigenschaften mithilfe einer separaten Schnittstellenstruktur
- Erweitern Sie eine Schnittstelle mit verschachtelten Eigenschaften, indem Sie die Produktschnittstelle generisch machen
![Erweitern einer Schnittstelle mit verschachtelten Eigenschaften in TypeScript](/img/TypeScript/feature-image---typescript-extend-interface.webp)
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' }
David is a back end developer with a major in computer science. He loves to solve problems using technology, learning new things, and making new friends. David is currently a technical writer who enjoys making hard concepts easier for other developers to understand and his work has been published on multiple sites.
LinkedIn GitHub