ミックスイン
TypeScript(およびJavaScript)クラスは、厳密な単一継承をサポートします。あなたはこれをすることはできません：
1
class User extends Tagged, Timestamped { // ERROR : no multiple inheritance
2
}
Copied!
再使用可能なコンポーネントからクラスを構築する別の方法は、mixinと呼ばれるより単純な部分クラスを組み合わせてそれらを構築することです。
アイデアはシンプルです。クラスBの機能を得るためにクラスBを継承するクラスAを定義するのではなく、その代わりにクラスAを取る関数Bを定義して、機能を追加した新しいクラスを返すようにするのです。関数
Bはミックスインです。[mixinは]
完全な例
1
// Needed for all mixins
2
type Constructor<T = {}> = new (...args: any[]) => T;
3
4
////////////////////
5
// Example mixins
6
////////////////////
7
8
// A mixin that adds a property
9
function Timestamped<TBase extends Constructor>(Base: TBase) {
10
return class extends Base {
11
timestamp = Date.now();
12
};
13
}
14
15
// a mixin that adds a property and methods
16
function Activatable<TBase extends Constructor>(Base: TBase) {
17
return class extends Base {
18
isActivated = false;
19
20
activate() {
21
this.isActivated = true;
22
}
23
24
deactivate() {
25
this.isActivated = false;
26
}
27
};
28
}
29
30
////////////////////
31
// Usage to compose classes
32
////////////////////
33
34
// Simple class
35
class User {
36
name = '';
37
}
38
39
// User that is Timestamped
40
const TimestampedUser = Timestamped(User);
41
42
// User that is Timestamped and Activatable
43
const TimestampedActivatableUser = Timestamped(Activatable(User));
44
45
////////////////////
46
// Using the composed classes
47
////////////////////
48
49
const timestampedUserExample = new TimestampedUser();
50
console.log(timestampedUserExample.timestamp);
51
52
const timestampedActivatableUserExample = new TimestampedActivatableUser();
53
console.log(timestampedActivatableUserExample.timestamp);
54
console.log(timestampedActivatableUserExample.isActivated);
Copied!
この例を分解してみましょう。
コンストラクタを取る
ミックスインはクラスを拡張し、新しい機能を追加します。したがって、コンストラクタを定義する必要があります。次のように簡単です：
1
// Needed for all mixins
2
type Constructor<T = {}> = new (...args: any[]) => T;
Copied!
クラスを拡張して返します
とても簡単です：
1
// A mixin that adds a property
2
function Timestamped<TBase extends Constructor>(Base: TBase) {
3
return class extends Base {
4
timestamp = Date.now();
5
};
6
}
Copied!
これだけです🌹
最終更新 1yr ago
リンクのコピー