TypeScript에서 중첩 속성을 사용하여 인터페이스 확장

1. TypeScript 교차를 사용하여 중첩 속성으로 인터페이스 확장
2. 별도의 인터페이스 구조를 사용하여 중첩 속성이 있는 인터페이스 확장
3. 제품 인터페이스를 제네릭으로 만들어 중첩 속성이 있는 인터페이스 확장

응용 프로그램을 개발할 때 기존 구조를 사용하지만 새 속성이 추가되는 새로운 요구 사항을 얻을 수 있습니다. 기존 구조를 수정하면 애플리케이션의 다른 모듈에 영향을 미칠 수 있으며 새 구조를 생성하면 코드에서 중복이 발생할 수 있습니다.

이 자습서에서는 새 요구 사항을 수용하도록 수정하지 않고 기본 구조에 새 속성을 추가하는 데 사용할 수 있는 다양한 방법을 배웁니다.

이 예제에 제공된 예제를 성공적으로 실행하려면 컴퓨터에 TypeScript와 npm(Node Package Manager)을 설치했는지 확인하십시오.

TypeScript 교차를 사용하여 중첩 속성으로 인터페이스 확장

집합 이론에서 교집합은 두 집합에서 공통적인 요소를 가져와서 형성되는 요소 집합입니다. 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 인터페이스와 교차하고 zipCode라는 새 속성을 기본 구조 productAddress에 추가합니다.

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' }

별도의 인터페이스 구조를 사용하여 중첩 속성이 있는 인터페이스 확장

속성을 사용하여 새 인터페이스를 만들고 기본 인터페이스를 확장하는 것은 수정하지 않고 기본 구조에 속성을 추가하는 두 번째 방법입니다.

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' }

제품 인터페이스를 제네릭으로 만들어 중첩 속성이 있는 인터페이스 확장

이 접근 방식은 제품 인터페이스가 일반적이라는 점을 제외하고 위에 있는 것과 유사합니다.

generic-interface라는 폴더를 만들고 ProductAddressStructure.ts라는 파일을 만듭니다. 다음 코드를 복사하여 파일에 붙여넣습니다.

export interface ProductAddressStructure{
    houseNumber: number
    streetName: string
}

위의 인터페이스는 두 개의 속성을 포함하는 기본 구조를 만듭니다.

같은 폴더 안에 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' }