javascript: 상속 (extends)

특정 Api를 호출해서 상속하는 Api가 있다면 기본 뼈대는 비슷한고 Api별로 반환값을 달리하는 예제를 만들어보자.

 

class Api {
  url: string;
  ajax: XMLHttpRequest;

  constructor(url: string) {
    this.url = url;
    this.ajax = new XMLHttpRequest;
  }

  protected getRequest<AjaxResponse>(): AjaxResponse {
    this.ajax.open('GET', this.url, false);
    this.ajax.send();

    return JSON.parse(ajax.response);
  }
}

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

class NewsDetailApi extends Api {
  getData(): NewsDetail {
    return this.getRequest<NewsDetail>();
  }
}

클래스의 extends를 이용한 호출 방법이다. 특정 API에 따른 반환값을 따로 명시하여 효율적으로 상속한다.

하지만 Javascript에서는 다중상속은 지원하지않고 만약 2개 3개이상의 상속을 받고싶은경우 extends를 활용하기 에는 힘들다. 이런경우에는 mixin이라는 TypeScript 공식 문서에있는 태크닉을 이용한다.