제네릭을 이용한 타입 정의

단순히 유니온 타입을 사용했을 때 각각의 interface 타입정의가 늘어난다. 

interface Email {
    value: string;
    selected: boolean;
}

const emails: Email[] = [
    { value: "naver.com", selected: true },
    { value: "gmail.com", selected: false },
    { value: "hanmail.net", selected: false },
];

interface ProdcutNum {
    value: number;
    selected: boolean;
}

const numberOfProducts: ProdcutNum[] = [
    { value: 1, selected: true },
    { value: 2, selected: false },
    { value: 3, selected: false },
];

function createDropdownItem(
    // 유니온 타입 활용
    item: 
    // | { value: string; selected: boolean }
    // | { value: number; selected: boolean }
    Email | ProdcutNum
) {
    const option = document.createElement("option");
    option.value = item.value.toString();
    option.innerText = item.value.toString();
    option.selected = item.selected;
    return option;
}

// NOTE: 이메일 드롭 다운 아이템 추가
emails.forEach(function (email) {
    const item = createDropdownItem(email);
    // const selectTag = document.querySelector("#email-dropdown");
    // selectTag.appendChild(item);
});

numberOfProducts.forEach((product) => {
    const item = createDropdownItem(product);
});

 

interface에서 제네릭을 사용할 때는 type의 매개변수를 받는 자리라고 생각하면 쉽다. 해당 매개변수를 사용할 type으로 지정해준다. 

 

export interface IPagenation {
    list: any[]
}

export interface IPostPagenation {
    list:any[]
}

const getPost = () => {
    const postPagenation: IPostPagenation = {} as IPostPagenation;
}

 

---

 

export interface IpostModel {
    id:number
    title:string
    content: string
}

export interface IPostPagenation{
    list:IpostModel[]
}

const getPost = () => {
    const postPagenation: IPostPagenation = {
        list:[
            {id:1, title:'title1', content:'content1'}
        ]
    }
    postPagenation.list
};

 

---

 

export interface IPagenation<T> {
    list: T[]
}

import {IPagenation} from './pagenation.type'
export interface IpostModel {
    id:number
    title:string
    content: string
}

export interface IPostPagenation extends IPagenation<IpostModel>{}

export interface INoticeModel{
    id:number
    notice: string
}

// export interface INoticePageNation {
//     list: INoticeModel[]
// }

export interface INoticePageNation extends IPagenation<INoticeModel>{}