[TYPESCRIPT] 타입스크립트에서 API 만들기와 기본적인 믹스인 기법

 

class의 extends를 사용하면 되지만
좀 더 유연성 있는 믹스인 기법을 사용해보는 것도 좋다.

타입스크립트의 class,extends 기능이 있지만 그것과 별개로 좀 더 유연한 상속을 할 수 있는 믹스인기법이다.

(참고 링크는 하단을 참조!)

const Feed_URL = 'url'; // API 경로
const CONTENT_URL = 'url'; // API 경로

class Api {
	// ajax
    getRequest<AjaxResponse>(url: string): AjaxResponse{
        const ajax = new XMLHttpRequest();
        ajax.open('GET', url, false);
        ajax.send();

        return JSON.parse(ajax.response)
    }
}

class NewsFeedApi{
    getData(): NewsFeed[] {
        return this.getRequest<NewsFeed[]>(Feed_URL);
    }
}

class NewsDetailApi{
    getData(id: string): NewsDetail {
        return this.getRequest<NewsDetail>(CONTENT_URL.replace('@id', id));
    }
}

interface NewsFeedApi extends Api{}; //오류를 제거하기 위해서 사용
interface NewsDetailApi extends Api{}; //오류를 제거하기 위해서 사용

//targetClass에 baseClasses를 배열로 extends와 같은 방식으로 상속 시킨다.
applyApiMixins(NewsFeedApi, [Api]);
applyApiMixins(NewsDetailApi, [Api]);

function applyApiMixins(targetClass: any, baseClasses: any[]): void{
    baseClasses.forEach(baseClass => {
        Object.getOwnPropertyNames(baseClass.prototype).forEach(name => {
            const descriptor = Object.getOwnPropertyDescriptor(baseClass.prototype, name);

            if(descriptor){
                Object.defineProperty(targetClass.prototype, name, descriptor);
            }
        })
    });
}

Documentation - Mixins