# 상속

## 클래스 상속 <a href="#class-inheritance" id="class-inheritance"></a>

TypeScript는 ES6에서와 마찬가지로 **클래스 상속에 `extends` 키워드를 사용**합니다. 그리고 아래 코드와 같은 방법으로 수퍼 클래스 Book의 `paper_type` 속성을 다른 값으로 덮어쓸 수 있습니다. (ES6에서는 지원하지 않습니다)

```typescript
// Book 수퍼 클래스를 상속 받은 E_Book 클래스
class E_Book extends Book {
  // paper_type 오버라이딩
  paper_type = '스크린';
}
```

컴파일된 JavaScript(ES5) 코드를 살펴보면 상속을 위해 별도의 `__extends` 유틸리티 함수가 생성된 것을 확인할 수 있습니다. 상속은 ES6부터 지원하기 때문에 ES5로 컴파일된 코드에서는 상속을 처리해주는 함수가 필요한 것입니다.

**컴파일 코드:**

{% code title="JavaScript" %}
```javascript
// 상속 유틸리티 함수
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();

// E_Book 클래스
var E_Book = /** @class */ (function (_super) {
    __extends(E_Book, _super); // 수퍼 클래스 상속
    function E_Book() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.paper_type = '스크린'; // 오버라이팅(덮어쓰기)
        return _this;
    }
    return E_Book;
}(Book));
```
{% endcode %}

하지만 `private` 접근 제어자에 의해 서브 클래스에서 접근 불가능한 속성을 덮어쓸 수는 없습니다. `manufacturing_plant` 속성을 E\_Book 클래스 내부에 설정하려 하면 다음과 같은 오류 메시지가 출력됩니다.

```typescript
// [오류]
// [ts]
// 'E_Book' 클래스가 기본 클래스 'Book'을(를) 잘못 확장합니다.
//   'manufacturing_plant' 속성은 'Book' 형식에서 private 이지만
//   'E_Book' 형식에서는 그렇지 않습니다.
// class E_Book
class E_Book extends Book {
  paper_type = '스크린';

  // [오류]
  _manufacturing_plant = '출판사 웹서버';

}
```

## 상속 / constructor, super <a href="#inherit-constructor-super" id="inherit-constructor-super"></a>

일반적으로 수퍼 클래스를 상속받은 **서브 클래스는 수퍼 클래스의 기능에 더하여 좀 더 많은 기능을 갖도록 설계**합니다. `constructor()`를 사용해 상속 받은 수퍼 클래스의 생성자를 서브 클래스의 생성자로 덮어쓸 수 있습니다. 이 때 반드시 **`super()`를 사용해 수퍼 클래스의 생성자에 요구되는 인자를 전달**해야 합니다.

```typescript
class E_Book extends Book {
  paper_type = '스크린';
  constructor(
    title:string, 
    author:string, 
    pages:number, 
    public is_downloadable:boolean
  ){
    // 수퍼 클래스 constructor를 덮어쓰기 위해서는 super() 실행이 필요합니다.
    super(title, author, pages);
    this.is_downloadable = is_downloadable;
  }
}
```

{% hint style="warning" %}
super()를 사용하지 않을 경우, 다음과 같은 오류가 발생합니다.&#x20;

> \[오류] \[ts] \
> 파생 클래스의 생성자는 'super' 호출을 포함해야 합니다. constructor E\_Book(title: string, author: string, pages: number, is\_downloadable: boolean): E\_Book
{% endhint %}

수퍼 클래스의 `protected` 속성은 서브 클래스에서 접근 가능한 반면, `private`속성은 접근이 불가능합니다.

```typescript
class E_Book extends Book {

  constructor(
    title:string, 
    author:string, 
    pages:number, 
    public is_downloadable:boolean
  ){

    super(title, author, pages);
    this.is_downloadable = is_downloadable;

    // 수퍼 클래스의 protected 속성은 접근 가능
    console.log(this.paper_type);

    // 수퍼 클래스의 private 속성은 접근 불가능
    // [오류]
    // [ts] '_manufacturing_plant' 속성은 private이며 'Book' 클래스 내에서만 액세스할 수 있습니다.
    // (property) Book._manufacturing_plant: string
    console.log(this._manufacturing_plant);

  }

}
```

## 실습 <a href="#practice" id="practice"></a>

{% embed url="https://stackblitz.com/edit/ts-inheritance?embed=1&file=index.ts&hideExplorer=0&hideNavigation=0&view=editor" %}

## 참고 <a href="#reference" id="reference"></a>

{% embed url="https://www.typescriptlang.org/docs/handbook/classes.html#inheritance" %}
TypeScript - 상속
{% endembed %}
