# ミックスイン

TypeScript(およびJavaScript)クラスは、厳密な単一継承をサポートします。あなたはこれをすることはできません：

```typescript
class User extends Tagged, Timestamped { // ERROR : no multiple inheritance
}
```

再使用可能なコンポーネントからクラスを構築する別の方法は、mixinと呼ばれるより単純な部分クラスを組み合わせてそれらを構築することです。

アイデアはシンプルです。クラスBの機能を得るために\_クラスBを継承するクラスAを\_定義するのではなく、その代わりに\_クラスAを取る関数B\_を定義して、機能を追加した新しいクラスを返すようにするのです。関数`B`はミックスインです。

> \[mixinは]
>
> 1. コンストラクタをとり、
> 2. コンストラクタを拡張し、新しい機能を持つクラスを作成する
> 3. 新しいクラスを返す

完全な例

```typescript
// Needed for all mixins
type Constructor<T = {}> = new (...args: any[]) => T;

////////////////////
// Example mixins
////////////////////

// A mixin that adds a property
function Timestamped<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
  };
}

// a mixin that adds a property and methods
function Activatable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    isActivated = false;

    activate() {
      this.isActivated = true;
    }

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

////////////////////
// Usage to compose classes
////////////////////

// Simple class
class User {
  name = '';
}

// User that is Timestamped
const TimestampedUser = Timestamped(User);

// User that is Timestamped and Activatable
const TimestampedActivatableUser = Timestamped(Activatable(User));

////////////////////
// Using the composed classes
////////////////////

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

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

この例を分解してみましょう。

## コンストラクタを取る

ミックスインはクラスを拡張し、新しい機能を追加します。したがって、\_コンストラクタ\_を定義する必要があります。次のように簡単です：

```typescript
// Needed for all mixins
type Constructor<T = {}> = new (...args: any[]) => T;
```

## クラスを拡張して返します

とても簡単です：

```typescript
// A mixin that adds a property
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://typescript-jp.gitbook.io/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.