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 하면 기존의 컴포넌트를 바꾸지 않고도 사용 가능
