# 믹스인(Mixin)

TypeScript (그리고 JavaScript) 클래스는 엄격하게 단일 상속만 지원합니다. 그래서 아래와 같이 *할 수 없습니다*:

```typescript
class User extends Tagged, Timestamped { // 오류 : 다중 상속 불가
}
```

재사용 가능한 구성요소로 클래스를 구성하는 다른 방법은 믹스인(mixin)이라 부르는 간단한 부분 클래스들로 클래스를 구성/조립하는 것입니다.

아이디어는 단순한데, *클래스 A가 클래스 B를 확장* 해서 그 기능을 받는 것이 아니라 *함수 B가 클래스 A* 를 받고 기능이 추가된 새 클래스를 반환하는 것입니다. 함수 `B`가 믹스인입니다.

> 믹스인은 다음과 같은 함수입니다
>
> 1. 생성자(constructor)를 받음,
> 2. 생성자 확장하여 새 기능을 추가한 클래스 생성
> 3. 새 클래스 반환

전체 내용이 나오는 예제

```typescript
// 모든 믹스인에 필요
type Constructor<T = {}> = new (...args: any[]) => T;

////////////////////
// 예제 믹스인
////////////////////

// 속성을 추가하는 믹스인
function Timestamped<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
  };
}

// 속성과 메소드를 추가하는 믹스인
function Activatable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    isActivated = false;

    activate() {
      this.isActivated = true;
    }

    deactivate() {
      this.isActivated = false;
    }
  };
}

////////////////////
// 클래스를 조립하는 예제
////////////////////

// 간단한 클래스
class User {
  name = '';
}

// Timestamped 적용된 User
const TimestampedUser = Timestamped(User);

// Timestamped와 Activatable이 적용된 User
const TimestampedActivatableUser = Timestamped(Activatable(User));

////////////////////
// 조립된 클래스 사용
////////////////////

const timestampedUserExample = new TimestampedUser();
console.log(timestampedUserExample.timestamp);

const timestampedActivatableUserExample = new TimestampedActivatableUser();
console.log(timestampedActivatableUserExample.timestamp);
console.log(timestampedActivatableUserExample.isActivated);
```

이 예제를 분해해봅시다.

## 생성자를 받음

믹스인은 클래스를 받고 새 기능을 더해서 확장시킵니다. 그러므로 무엇이 *생성자(constructor)* 인지 정해야 합니다. 쉬움:

```typescript
// 모든 믹스인에 필요
type Constructor<T = {}> = new (...args: any[]) => T;
```

## 클래스를 확장하여 반환

아주 쉬움:

```typescript
// 속성을 추가하는 믹스인
function Timestamped<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
  };
}
```

이게 전부입니다 🌹


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://radlohead.gitbook.io/typescript-deep-dive/type-system/mixins.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.