Extienda una interfaz con propiedades anidadas en TypeScript

1. Extienda una interfaz con propiedades anidadas mediante la intersección de TypeScript
2. Extienda una interfaz con propiedades anidadas utilizando una estructura de interfaz separada
3. Extienda una interfaz con propiedades anidadas haciendo que la interfaz del producto sea genérica

Cuando estamos desarrollando aplicaciones, podemos obtener un nuevo requisito que utiliza la estructura existente pero con la adición de nuevas propiedades. La modificación de la estructura existente podría afectar a otros módulos de nuestra aplicación, y la creación de una nueva estructura podría generar redundancia en nuestro código.

En este tutorial, aprenderá los diferentes métodos que puede usar para agregar nuevas propiedades a su estructura base sin modificarla para adaptarse a su nuevo requisito.

Para ejecutar con éxito los ejemplos proporcionados en este ejemplo, asegúrese de haber instalado TypeScript y Node Package Manager (npm) en su máquina.

Extienda una interfaz con propiedades anidadas mediante la intersección de TypeScript

En la teoría de conjuntos, una intersección es un conjunto de elementos formado al obtener los elementos que son comunes en dos conjuntos. Una intersección en TypeScript funciona de la misma manera al devolver una nueva estructura creada a partir de las propiedades comunes de las estructuras intersecadas.

Para demostrar este ejemplo, abra el editor Visual Studio Code y cree una carpeta using-intersection.

Dentro de esta carpeta, cree un archivo llamado Producto.ts. Copie y pegue el siguiente código en el archivo.

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

El archivo Product.ts contiene una interfaz llamada Product, y dentro de esta interfaz, hemos definido una estructura llamada productAddress. En el siguiente paso, agregaremos una nueva propiedad a la estructura sin modificar el código anterior.

En la misma carpeta, cree un archivo llamado NewProduct.ts. Copie y pegue el siguiente código en el archivo.

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)

El archivo NewProduct.ts define un nuevo tipo de interfaz llamado NewProduct utilizando la palabra clave type. El tipo NewProduct se cruza con la interfaz Product mediante el símbolo & y añade una nueva propiedad llamada zipCode a la estructura base productAddress.

El objeto productInfo contiene una instancia de NewProduct. Tenga en cuenta que la nueva estructura tiene todas las propiedades de la estructura base y la propiedad de la estructura intersecada.

Ve a tu terminal y cd a la ubicación de la carpeta para ejecutar este código. Use el siguiente comando para generar un archivo tsconfig.json para nuestra configuración.

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

Asegúrese de tener las siguientes propiedades de configuración en el archivo tsconfig.json generado en su paquete.

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

Use el siguiente comando para transpilar todos sus archivos TypeScript a archivos Java.

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

Utilice el siguiente comando para ejecutar el ejemplo anterior.

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

Producción :

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

Extienda una interfaz con propiedades anidadas utilizando una estructura de interfaz separada

Crear una nueva interfaz con sus propiedades y extender la interfaz base es la segunda forma de agregar propiedades a la estructura base sin modificarla.

Cree una carpeta llamada separate-interface y cree un archivo llamado ProductAddressStructure.ts dentro de la carpeta. Copie y pegue el siguiente código en el archivo.

export interface ProductAddressStructure{
    houseNumber: number
    streetName: string
}

El código anterior define nuestra estructura base que queremos agregar propiedades sin modificar. Cree un archivo llamado Product.ts en la misma carpeta. Copie y pegue el siguiente código en el archivo.

import { ProductAddressStructure } from "./ProductAddressStructure"

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

El código anterior define una interfaz de Product que agrega las propiedades productName y productPrice. Si queremos agregar una nueva propiedad a la estructura base sin modificarla, debemos crear una nueva interfaz que contenga la nueva propiedad y extender la estructura base.

Cree un archivo llamado NewProductAddressStructure.ts en la misma carpeta. Copie y pegue el siguiente código en el archivo.

import { ProductAddressStructure } from "./ProductAddressStructure";

export interface NewProductAddressStructure extends ProductAddressStructure{
    zipCode: string
}

El código anterior crea una nueva interfaz que contiene la propiedad zipCode y hereda todas las propiedades de la estructura base ProductAddressStructure.

Cree un archivo llamado NewProduct.ts dentro de la misma carpeta. Copie y pegue el siguiente código en el archivo.

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)

El archivo NewProduct.ts define una interfaz llamada NewProduct que hereda productName y productPrice de ProductPrice. La interfaz NewProduct también implementa la NewAddressStructureInterface compuesta por las propiedades de la nueva estructura y la estructura heredada.

Use los mismos pasos que usamos para ejecutar el primer ejemplo para ejecutar este ejemplo.

Producción :

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

Extienda una interfaz con propiedades anidadas haciendo que la interfaz del producto sea genérica

Este enfoque es similar al que tenemos arriba, excepto que la interfaz Product es genérica.

Cree una carpeta llamada generic-interface, y cree un archivo llamado ProductAddressStructure.ts. Copie y pegue el siguiente código en el archivo.

export interface ProductAddressStructure{
    houseNumber: number
    streetName: string
}

La interfaz anterior crea la estructura base que contiene dos propiedades.

Cree un archivo llamado Product.ts dentro de la misma carpeta. Copie y pegue el siguiente código en el archivo.

import { ProductAddressStructure } from "./ProductAddressStructure"

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

El archivo Product.ts define una interfaz genérica llamada Product. La interfaz restringirá la implementación a estructuras que solo heredan de ProductAddressStrcture.

La interfaz también contiene un campo llamado productAddress que se resolverá en un tipo de instancia ProductAddressStructure.

Cree un archivo llamado NewProductAddressStructure.ts en la misma carpeta. Copie y pegue el siguiente código en el archivo.

import { ProductAddressStructure } from "./ProductAddressStructure";

export interface NewProductAddressStructure extends ProductAddressStructure{
    zipCode: string
}

El NewProductAddressStructure.ts define una nueva interfaz denominada NewProductAddressStructure que hereda todas las propiedades básicas de la interfaz ProductAddressStructure.

Cree un archivo llamado NewProduct.ts en la misma carpeta. Copie y pegue el siguiente código en el archivo.

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)

El archivo NewProduct.ts define una interfaz denominada NewProduct. La interfaz NewProduct hereda todas las propiedades del Product, incluida la estructura genérica productAddress que contiene la propiedad zipCode de la interfaz NewProductAddressStructure.

Dado que NewProductAddressStructure hereda de la estructura base ProductAddressStructure, la interfaz NewProduct también contiene las propiedades houseNumber y streetName.

Use los pasos que usamos para ejecutar el primer paso para ejecutar este ejemplo.

Producción :

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