타입스크립트 제네릭 인터페이스 예제

타입스크립트 제네릭 인터페이스( Typescript Generic Interface)는 인터페이스 이름 뒤에 <T>와 같은 타입 매개변수를 선언하여 하나의 인터페이스 구조를 여러 데이터 타입에 사용할 수 있도록 하는 기능이다.

Box<string>에서는 데이터가 string이 되고,
Box<number>에서는 데이터가 number가 된다.

타입별로 비슷한 인터페이스를 반복해서 만들 수 있지만,
하나의 구조만을 재사용할 수 있다.

⊙

interface Box<T> {
    value: T;
}

const text: Box<string> = {
    value: "Hello"
};

const number: Box<number> = {
    value: 100
};

⊙

interface Box<T> {
    value: T;
}

⊙

interface Box<T> {
    value: T;
}

const textBox: Box<string> = {
    value: "Hello"
};

const numberBox: Box<number> = {
    value: 100
};

console.log(textBox.value);
console.log(numberBox.value);

⊙

interface Box<string> {
    value: string;
}

⊙

interface DataBox<T> {
    data: T;
}

const nameData: DataBox<string> = {
    data: "Kim"
};

const ageData: DataBox<number> = {
    data: 30
};

const activeData: DataBox<boolean> = {
    data: true
};

console.log(nameData.data);
console.log(ageData.data);
console.log(activeData.data);

⊙

interface StringDataBox {
    data: string;
}

interface NumberDataBox {
    data: number;
}

interface BooleanDataBox {
    data: boolean;
}

interface DataBox<T> {
    data: T;
}

⊙

interface Product {
    id: number;
    name: string;
    price: number;
}

interface ResponseData<T> {
    success: boolean;
    data: T;
}

const productResponse: ResponseData<Product> = {
    success: true,
    data: {
        id: 1,
        name: "Keyboard",
        price: 50000
    }
};

console.log(productResponse.success);
console.log(productResponse.data.name);
console.log(productResponse.data.price);

⊙

interface Box<T> {
    value: T;
}

const score: Box<number> = {
    value: 100
};

console.log(score.value);