[Mixins](https://www.typescriptlang.org/docs/handbook/mixins.html)

除了傳統的 OO 層次結構，另一種從可重用元件構建類的流行方法是透過組合更簡單的部分類來構建它們。 您可能熟悉 Scala 等語言的 mixin 或特徵的想法，並且該模式在 JavaScript 社群中也很流行。

模式依賴於使用具有類繼承的泛型來擴充套件基類。 TypeScript 最好的 mixin 支援是透過類表示式模式完成的。

看一個例子：

```typescript
class Sprite {
  name = "";
  x = 0;
  y = 0;

constructor(name: string) {
    this.name = name;
  }
}

type Constructor = new (...args: any[]) => {};

// This mixin adds a scale property, with getters and setters
// for changing it with an encapsulated private property:

function Scale<tbase extends="" constructor="">(Base: TBase) {
  return class Scaling extends Base {
    // Mixins may not declare private/protected properties
    // however, you can use ES2020 private fields
    _scale = 1;

setScale(scale: number) {
      this._scale = scale;
    }

get scale(): number {
      return this._scale;
    }
  };
}

const EightBitSprite = Scale(Sprite);

const flappySprite = new EightBitSprite("Bird");
flappySprite.setScale(0.8);
console.log('Ethan:' ,flappySprite.scale);
```

本例子和我之前的文章[TypeScript 類裝飾器的一個例子和使用單步除錯搞清楚其執行原理](https://blog.csdn.net/i042416/article/details/118381380)其實很類似，只是沒有使用裝飾器語法罷了。

使用Scale 對 Sprite 進行裝配，傳入的是 Class Sprite 的定義：

![](https://img-blog.csdnimg.cn/img_convert/0cb4dd7799ac1e7c110800b320fc234e.png)

返回的是一個新的函式，但只要不使用該函式去例項化新的類例項，函式體就不會執行。

現在準備使用 Scale 裝飾過後的 Sprite 的擴充套件類去進行例項化操作了：

![](https://img-blog.csdnimg.cn/img_convert/ceae63584d52e1c6a579466830e6bab4.png)

即將進入 mixin 內部：

![](https://img-blog.csdnimg.cn/img_convert/326a7cd2584d10fe26d30e81e3c9b255.png)

首先執行基類的欄位初始化邏輯：
![](https://img-blog.csdnimg.cn/img_convert/1dcf7f7ef8c373a6859fbf5eff0e426e.png)

然後才是子類欄位的初始化邏輯：
![](https://img-blog.csdnimg.cn/img_convert/cb58b851d413eb1d760fe43f4df787ab.png)

# Constrained Mixins

我們可以對上述 Mixins 做一些改造和增強。

在上面的形式中，mixin 沒有類的基礎知識，這會使建立你想要的設計變得困難。

比如，使用上面的 mixin，我們可以給任意的 Class 新增 _scale 屬性。

![](https://img-blog.csdnimg.cn/img_convert/add453e8fd07ab932195a95c3e1f68fc.png)

![](https://img-blog.csdnimg.cn/img_convert/f40af16c3fb3c92f06a9ee1efd793b8f.png)

如果我們想對此做進一步限制，比如限制 Scale 只能裝飾某些特定型別的 Class.

為了對此建模，我們修改原始建構函式型別以接受泛型引數。

```typescript
// This was our previous constructor:
type Constructor = new (...args: any[]) => {};
// Now we use a generic version which can apply a constraint on
// the class which this mixin is applied to
type GConstructor<t> = new (...args: any[]) => T;
```

現在，使用這個型別構造器，必須傳入一個基類的型別作為型別引數：

![](https://img-blog.csdnimg.cn/img_convert/e2a37bacb3978dcbb0cf53cd5e5a975d.png)

```typescript
type Spritable = GConstructor<sprite>;
```

現在，Scale 裝飾器只能修飾 Sprite 及其子類了：

![](https://img-blog.csdnimg.cn/img_convert/b86ed53cbdee533dfbdbe9c53303682f.png)

現在，如果傳入一個並非 Sprite 及其子類的方法進入 Scale 裝飾器，會引起語法錯誤：

![](https://img-blog.csdnimg.cn/img_convert/59aece2c9bd03f579d7cc67f8b324ecf.png)

# 另一種透過 Object.defineProperty 實現的 Mixin

```typescript
// Each mixin is a traditional ES class
class Jumpable {
  jump() {}
}

class Duckable {
  duck() {}
}

// Including the base
class Sprite {
  x = 0;
  y = 0;
}

// Then you create an interface which merges
// the expected mixins with the same name as your base
interface Sprite extends Jumpable, Duckable {}
// Apply the mixins into the base class via
// the JS at runtime
applyMixins(Sprite, [Jumpable, Duckable]);

let player = new Sprite();
player.jump();
console.log(player.x, player.y);

// This can live anywhere in your codebase:
function applyMixins(derivedCtor: any, constructors: any[]) {
  constructors.forEach((baseCtor) => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
      Object.defineProperty(
        derivedCtor.prototype,
        name,
        Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
          Object.create(null)
      );
    });
  });
}
```

把 Jumpable 和 Duckable 的屬性透過 Object.defineProperty 賦給 Sprite：

![](https://img-blog.csdnimg.cn/img_convert/3efdefe36c0655576a1bc8cd7441e042.png)

最後的執行時效果：

![](https://img-blog.csdnimg.cn/img_convert/9b0f42259bce9151a8d93389db1343b2.png)

interface Sprite,可以使用 Duckable 和 Jumpable 類裡定義的方法了。

![](https://img-blog.csdnimg.cn/img_convert/e820dffb33f3a6b157f65ce264330981.png)</sprite></t></tbase>

TypeScript Mixins 概念介紹

相關文章