패스트캠퍼스 챌린지 18일차

타입과 인터페이스

 

타입스크립트는 type(타입 알리아스)말고도 interface로도 타입을 지정해 줄 수 있다. 타입과 인터페이스는 대체로 비슷하나 근소한 차이가 있다. 

 

1) 타입을 결합하거나 조합하는 방식의 차이

 - 확장되는 형식의 타입에서는 인터페이스를 선호한다.

 - type이 제공하는 유니온(|)타입은 인터페이스가 지원하지 않음 (인터섹션(&)은 가능)

 - 그 외에는 인터페이스를 사용하는 경향이 있다

 

interface Store {
    currentPage :number, 
    feeds :NewsFeed[]
}

interface News {
    readonly id :number,
    readonly url :string,
    readonly user :string,
    readonly time_ago :string,
    readonly title :string,
    readonly content :string
}

interface NewsFeed extends News{    
    readonly comments_count :number,    
    readonly points :number,    
    read? :boolean
}

interface NewsDetail extends News{    
    readonly comments :NewsComments[]
}

interface NewsComments extends News{
    readonly comments: NewsComments[],
    readonly level :number
}

const container: HTMLElement | null = document.querySelector('#root');
const ajax :XMLHttpRequest = new XMLHttpRequest();
const NEWS_URL :string = 'https://api.hnpwa.com/v0/news/1.json'
const CONTENT_URL :string = 'https://api.hnpwa.com/v0/item/@id.json';
const store :Store = {
    ...
}

function getData<AjaxResponse>(url :string) :AjaxResponse {
    ...
}

function makeFeeds(feeds :NewsFeed[]) :NewsFeed[]{
    ...
}

function updateView(html :string) :void{
    ...
}

function newsFeed() :void{
    ...
}

function newsDetail() :void{
    ...
}

function makeComment(comments :NewsComments[]) :string{
    ...
}

function router() :void{
    ...
}

window.addEventListener('hashchange', router);

router();

 

인터페이스의 경우엔 타입 알리아스와 기능적으로는 아주 유사하지만 사용 방식(=의 유무)이나 사용하는 목적의 차이가 있다. 인터섹션(&)을 사용하는 타입 알리아스와 달리 인터페이스는 extends 키워드를 사용하여 타입간의 관계를 확장하는 형식을 나타낸다. 확장되는 형식의 타입에는 인터페이스가 주로 사용된다고 한다. 하지만 인터페이스에는 유니온(|)을 사용할 수 없으므로 유니온(|)을 사용해야 하는 경우는 필수적으로 타입 알리아스를 사용해야 한다.

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential