Étendre une interface avec des propriétés imbriquées dans TypeScript

1. Étendre une interface avec des propriétés imbriquées à l’aide de l’intersection TypeScript
2. Étendre une interface avec des propriétés imbriquées à l’aide d’une structure d’interface distincte
3. Étendre une interface avec des propriétés imbriquées en rendant l’interface du produit générique

Lorsque nous développons des applications, nous pouvons avoir une nouvelle exigence qui utilise la structure existante mais avec l’ajout de nouvelles propriétés. La modification de la structure existante peut affecter d’autres modules de notre application, et la création d’une nouvelle structure peut entraîner une redondance dans notre code.

Dans ce didacticiel, vous apprendrez les différentes méthodes que vous pouvez utiliser pour ajouter de nouvelles propriétés à votre structure de base sans la modifier pour répondre à vos nouvelles exigences.

Pour exécuter avec succès les exemples fournis dans cet exemple, assurez-vous que vous avez installé TypeScript et Node Package Manager (npm) sur votre machine.

Étendre une interface avec des propriétés imbriquées à l’aide de l’intersection TypeScript

Dans la théorie des ensembles, une intersection est un ensemble d’éléments formés en obtenant les éléments communs à deux ensembles. Une intersection dans TypeScript fonctionne de la même manière en renvoyant une nouvelle structure constituée des propriétés communes des structures intersectées.

Pour illustrer cet exemple, ouvrez l’éditeur Visual Studio Code et créez un dossier using-intersection.

Dans ce dossier, créez un fichier nommé Product.ts. Copiez et collez le code suivant dans le fichier.

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

Le fichier Product.ts contient une interface nommée Product, et à l’intérieur de cette interface, nous avons défini une structure nommée productAddress. Dans l’étape suivante, nous ajouterons une nouvelle propriété à la structure sans modifier le code ci-dessus.

Dans le même dossier, créez un fichier nommé NewProduct.ts. Copiez et collez le code suivant dans le fichier.

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)

Le fichier NewProduct.ts définit un nouveau type d’interface nommé NewProduct à l’aide du mot-clé type. Le type NewProduct est intersecté avec l’interface Product à l’aide du symbole & et ajoute une nouvelle propriété nommée zipCode à la structure de base productAddress.

L’objet productInfo contient une instance de NewProduct. Notez que la nouvelle structure a toutes les propriétés de la structure de base et la propriété de la structure intersectée.

Allez sur votre terminal et cd à l’emplacement du dossier pour exécuter ce code. Utilisez la commande suivante pour générer un fichier tsconfig.json pour notre configuration.

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

Assurez-vous d’avoir les propriétés de configuration suivantes dans le fichier tsconfig.json généré sur votre package.

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

Utilisez la commande suivante pour transpiler tous vos fichiers TypeScript en fichiers Java.

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

Utilisez la commande suivante pour exécuter l’exemple ci-dessus.

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

Production:

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

Étendre une interface avec des propriétés imbriquées à l’aide d’une structure d’interface distincte

Créer une nouvelle interface avec ses propriétés et étendre l’interface de base est la deuxième façon d’ajouter des propriétés à la structure de base sans la modifier.

Créez un dossier nommé interface séparée et créez un fichier nommé ProductAddressStructure.ts dans le dossier. Copiez et collez le code suivant dans le fichier.

export interface ProductAddressStructure{
    houseNumber: number
    streetName: string
}

Le code ci-dessus définit notre structure de base que nous voulons ajouter des propriétés sans modifier. Créez un fichier nommé Product.ts dans le même dossier. Copiez et collez le code suivant dans le fichier.

import { ProductAddressStructure } from "./ProductAddressStructure"

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

Le code ci-dessus définit une interface Product qui ajoute les propriétés productName et productPrice. Si nous voulons ajouter une nouvelle propriété à la structure de base sans la modifier, nous devons créer une nouvelle interface contenant la nouvelle propriété et étendre la structure de base.

Créez un fichier nommé NewProductAddressStructure.ts dans le même dossier. Copiez et collez le code suivant dans le fichier.

import { ProductAddressStructure } from "./ProductAddressStructure";

export interface NewProductAddressStructure extends ProductAddressStructure{
    zipCode: string
}

Le code ci-dessus crée une nouvelle interface contenant la propriété zipCode et hérite de toutes les propriétés de la structure de base ProductAddressStructure.

Créez un fichier nommé NewProduct.ts dans le même dossier. Copiez et collez le code suivant dans le fichier.

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)

Le fichier NewProduct.ts définit une interface nommée NewProduct qui hérite du productName et du productPrice. L’interface NewProduct implémente également la NewAddressStructureInterface composée des propriétés de la nouvelle structure et de la structure héritée.

Utilisez les mêmes étapes que nous avons utilisées pour exécuter le premier exemple pour exécuter cet exemple.

Production:

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

Étendre une interface avec des propriétés imbriquées en rendant l’interface du produit générique

Cette approche est similaire à celle que nous avons ci-dessus, sauf que l’interface Produit est générique.

Créez un dossier nommé generic-interface et créez un fichier nommé ProductAddressStructure.ts. Copiez et collez le code suivant dans le fichier.

export interface ProductAddressStructure{
    houseNumber: number
    streetName: string
}

L’interface ci-dessus crée la structure de base contenant deux propriétés.

Créez un fichier nommé Product.ts dans le même dossier. Copiez et collez le code suivant dans le fichier.

import { ProductAddressStructure } from "./ProductAddressStructure"

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

Le fichier Product.ts définit une interface générique nommée Product. L’interface limitera l’implémentation aux structures qui héritent uniquement de la ProductAddressStrcture.

L’interface contient également un champ nommé productAddress qui sera résolu en un type de l’instance ProductAddressStructure.

Créez un fichier nommé NewProductAddressStructure.ts dans le même dossier. Copiez et collez le code suivant dans le fichier.

import { ProductAddressStructure } from "./ProductAddressStructure";

export interface NewProductAddressStructure extends ProductAddressStructure{
    zipCode: string
}

Le NewProductAddressStructure.ts définit une nouvelle interface nommée NewProductAddressStructure ​​qui hérite de toutes les propriétés de base de l’interface ProductAddressStructure.

Créez un fichier nommé NewProduct.ts dans le même dossier. Copiez et collez le code suivant dans le fichier.

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)

Le fichier NewProduct.ts définit une interface nommée NewProduct. L’interface NewProduct hérite de toutes les propriétés du Product, y compris la structure générique productAddress qui contient la propriété zipCode de l’interface NewProductAddressStructure.

Etant donné que la NewProductAddressStructure ​​hérite de la structure de base ProductAddressStructure, l’interface NewProduct contient également les propriétés houseNumber et streetName.

Utilisez les étapes que nous avons utilisées pour exécuter la première étape pour exécuter cet exemple.

Production:

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