TypeScript でネストされたプロパティを使用してインターフェイスを拡張する

1. ネストされたプロパティで TypeScript 交差を使用してインターフェイスを拡張する
2. ネストされたプロパティで別のインターフェイス構造を使用してインターフェイスを拡張する
3. 製品インターフェイスを汎用にすることにより、ネストされたプロパティを持つインターフェイスを拡張する

アプリケーションを開発しているときに、既存の構造を使用するが、新しいプロパティが追加された新しい要件が発生する場合があります。既存の構造を変更すると、アプリケーションの他のモジュールに影響を与える可能性があり、新しい構造を作成すると、コードに冗長性が生じる可能性があります。

このチュートリアルでは、新しい要件に対応するために変更せずに、基本構造に新しいプロパティを追加するために使用できるさまざまな方法を学習します。

この例で提供されている例を正常に実行するには、TypeScript と Node Package Manager（npm）がマシンにインストールされていることを確認してください。

ネストされたプロパティで TypeScript 交差を使用してインターフェイスを拡張する

セット理論では、交差は 2つのセットで共通の要素を取得することによって形成される要素のセットです。TypeScript の交差は、交差した構造の共通のプロパティから作成された新しい構造を返すことによって同じように機能します。

この例を示すために、Visual Studio Codeエディターを開き、using-intersection フォルダーを作成します。

このフォルダ内に、Product.ts という名前のファイルを作成します。次のコードをコピーしてファイルに貼り付けます。

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

Product.ts ファイルには Product という名前のインターフェイスが含まれており、このインターフェイス内に productAddress という名前の構造が定義されています。次のステップでは、上記のコードを変更せずに、構造に新しいプロパティを追加します。

同じフォルダに、NewProduct.ts という名前のファイルを作成します。次のコードをコピーしてファイルに貼り付けます。

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)

NewProduct.ts ファイルは、type キーワードを使用して NewProduct という名前の新しいインターフェイスタイプを定義します。NewProduct タイプは、&記号を使用して Product インターフェイスと交差し、基本構造 productAddress に zipCode という名前の新しいプロパティを追加します。

productInfo オブジェクトには、NewProduct のインスタンスが含まれています。新しい構造には、基本構造のすべてのプロパティと交差した構造のプロパティがあることに注意してください。

ターミナルに移動し、フォルダの場所に cd してこのコードを実行します。次のコマンドを使用して、構成用の tsconfig.json ファイルを生成します。

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

パッケージで生成された tsconfig.json ファイルに次の構成プロパティがあることを確認してください。

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

次のコマンドを使用して、すべての TypeScript ファイルを Java ファイルにトランスパイルします。

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

次のコマンドを使用して、上記の例を実行します。

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

出力：

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

ネストされたプロパティで別のインターフェイス構造を使用してインターフェイスを拡張する

プロパティを使用して新しいインターフェイスを作成し、ベースインターフェイスを拡張することは、プロパティを変更せずにベース構造に追加する 2 番目の方法です。

separate-interface という名前のフォルダーを作成し、フォルダー内に ProductAddressStructure.ts という名前のファイルを作成します。次のコードをコピーしてファイルに貼り付けます。

export interface ProductAddressStructure{
    houseNumber: number
    streetName: string
}

上記のコードは、変更せずにプロパティを追加する基本構造を定義しています。同じフォルダの下に Product.ts という名前のファイルを作成します。次のコードをコピーしてファイルに貼り付けます。

import { ProductAddressStructure } from "./ProductAddressStructure"

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

上記のコードは、プロパティ productName および productPrice を追加する Product インターフェースを定義します。基本構造を変更せずに新しいプロパティを追加する場合は、新しいプロパティを含む新しいインターフェイスを作成し、基本構造を拡張する必要があります。

同じフォルダの下に NewProductAddressStructure.ts という名前のファイルを作成します。次のコードをコピーしてファイルに貼り付けます。

import { ProductAddressStructure } from "./ProductAddressStructure";

export interface NewProductAddressStructure extends ProductAddressStructure{
    zipCode: string
}

上記のコードは、プロパティ zipCode を含む新しいインターフェイスを作成し、基本構造 ProductAddressStructure からすべてのプロパティを継承します。

同じフォルダ内に NewProduct.ts という名前のファイルを作成します。次のコードをコピーしてファイルに貼り付けます。

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)

NewProduct.ts ファイルは、ProductPrice から productName と productPrice を継承する NewProduct という名前のインターフェイスを定義します。NewProduct インターフェースは、新しい構造と継承された構造のプロパティで構成される NewAddressStructureInterface も実装します。

最初の例を実行するために使用したのと同じ手順を使用して、この例を実行します。

出力：

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

製品インターフェイスを汎用にすることにより、ネストされたプロパティを持つインターフェイスを拡張する

このアプローチは、Product インターフェイスが汎用的であることを除いて、上記のアプローチと似ています。

generic-interface という名前のフォルダを作成し、ProductAddressStructure.ts という名前のファイルを作成します。次のコードをコピーしてファイルに貼り付けます。

export interface ProductAddressStructure{
    houseNumber: number
    streetName: string
}

上記のインターフェースは、2つのプロパティを含む基本構造を作成します。

同じフォルダ内に Product.ts という名前のファイルを作成します。次のコードをコピーしてファイルに貼り付けます。

import { ProductAddressStructure } from "./ProductAddressStructure"

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

Product.ts ファイルは、Product という名前の汎用インターフェイスを定義します。インターフェイスは、実装を ProductAddressStrcture からのみ継承する構造に制限します。

インターフェイスには、ProductAddressStructure インスタンスのタイプに解決される productAddress という名前のフィールドも含まれています。

同じフォルダに NewProductAddressStructure.ts という名前のファイルを作成します。次のコードをコピーしてファイルに貼り付けます。

import { ProductAddressStructure } from "./ProductAddressStructure";

export interface NewProductAddressStructure extends ProductAddressStructure{
    zipCode: string
}

NewProductAddressStructure.ts は、ProductAddressStructure インターフェイスのすべての基本プロパティを継承する NewProductAddressStructure という名前の新しいインターフェイスを定義します。

同じフォルダの下に NewProduct.ts という名前のファイルを作成します。次のコードをコピーしてファイルに貼り付けます。

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)

NewProduct.ts ファイルは、NewProduct という名前のインターフェイスを定義します。NewProduct インターフェイスは、NewProductAddressStructure インターフェイスのプロパティ zipCode を含む汎用構造 productAddress を含む、Product のすべてのプロパティを継承します。

NewProductAddressStructure は基本構造 ProductAddressStructure を継承しているため、NewProduct インターフェイスにはプロパティ houseNumber と streetName も含まれています。

この例を実行するには、最初のステップを実行するために使用したステップを使用します。

出力：

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