타입스크립트 기존 컴포넌트에 다른 타입 추가 하기

1. 유니온 타입

interface Props {
    article : Article|CompactArticle;
}

 사용후 타입가드 

export const isArticleNotCompact = (props:CompactArticle|Article): props is Article => {
        return  'pubdate' in props && 'author' in props ;
}

{
    isArticleNotCompact(article) &&//Caompact에는 없는 속성들 처리
    <>
        <div className="entry-meta  font-medium  position-relative d-flex mt-md-4 d-none d-md-block d-lg-block">
            <span> {TimeAgo(article.pubdate as string)}</span>
            <span className={article.author && "vertical-divider ml-5 mr-5"}></span><span >{article.author}</span>
        </div>
        <div className="entry-meta  font-medium position-relative d-flex mt-md-4 d-block d-md-none d-lg-none">
            <span> {TimeAgo(article.pubdate as string)}</span>
        </div>
    </>
}

2. extends 하기

export interface CompactArticle {
    id: number
    title?: string | undefined
    badge? : string | undefined
    sub_title?: string | undefined
    summary?: string | undefined
    image?: string | undefined
    url: string
    related?: []|Related[] | undefined
}

export interface Article extends CompactArticle{
author? : string | undefined
summary? : string | undefined
description? : string | undefined
// 필요한 타입 추가 및 재정의

}

타입을 extends 하면 기존의 컴포넌트를 바꾸지 않고도 사용 가능