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

함수의 규격 작성하기

 

타입스크립트는 중복되는 타입의 경우 공통의 타입을 만들어서 사용할 수 있고 변수말고도 함수에도 타입을 지정할 수 있다.

 

type Store = {
    currentPage :number, 
    feeds :NewsFeed[]
}

type News = {
    id :number,    
    url :string,
    user :string,
    time_ago :string,
    title :string,
    content :string
}

type NewsFeed = News & {    
    comments_count :number,    
    points :number,    
    read? :boolean
}

type NewsDetail = News & {    
    comments :NewsComments[]
}

type NewsComments = News & {
    comments: NewsComments[],
    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 = {
    currentPage: 1,
    feeds: []
}

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

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

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

function newsFeed() :void{
    let newsFeed: NewsFeed[] = store.feeds;
    const newsTotalPage = newsFeed.length / 10;
    const newsList = [];  

    if(newsFeed.length === 0){
        newsFeed = store.feeds = makeFeeds(getData<NewsFeed[]>(NEWS_URL));
    }
    
    for(let i=(store.currentPage - 1) * 10; i<store.currentPage * 10; i++){
        ...
    }
    ...
}

function newsDetail() :void{
    const id = location.hash.substring(7);
    const newsContent = getData<NewsDetail>(CONTENT_URL.replace('@id', id));
    ...
}

function makeComment(comments :NewsComments[]) :string{
    const commentString = [];
    
    for(let i=0; i<comments.length; i++){
        const comment :NewsComments = comments[i];
        ...
    }
}

function router() :void{
	...
}

window.addEventListener('hashchange', router);

router();

 

GET으로 받아오는 ajax의 타입을 newsFeed type으로 지정했었는데 NewsFeed, NewsDetail, NewsContents 등 API형식을 다르게 써야하는 경우가 있다. 세가지 타입 각각 따로 type을 지정해도 되지만 공통적으로 쓰이는 부분이 있기 때문에 그 부분을 따로 만들어도 된다.

 

News라는 type에 공통적인 값들의 타입을 지정하고 &(인터섹션)를 통해 추가적으로 필요한 부분은 새로운 type (NewsFeed, NewsDetail, NewsContents 등)으로 정의하여 사용하면 된다.

 

 

vsCode의 익스텐션에 'REST Client'라는 것을 추가하면 api 결과를 좀 더 편하게 볼 수 있다.

###
GET https://api.hnpwa.com/v0/news/1.json HTTP/1.1

###
GET https://api.hnpwa.com/v0/item/29816504.json HTTP/1.1

 

postman처럼 사용할 수 있는 것 같다...

 

 

 

 

https://bit.ly/37BpXiC

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

 

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

 

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