TypeScriptミックスイン
序章
TypeScriptでは、複数のクラスから継承または拡張することはできませんが、Mixinsはそれを回避するのに役立ちます。
ミックスインは部分クラスを作成し、それらを組み合わせて、部分クラスのすべてのメソッドとプロパティを含む単一のクラスを形成できます。
注: ドキュメントでは、このチュートリアルのアプローチを「代替パターン」として説明しています。
このチュートリアルでは、TypeScriptでミックスインを作成して使用します。
クラスの制限を理解する
ミックスインの価値を実証できるように、例を作成しましょう。
2つのクラスを考えてみましょう。 Car
と Lorry
、が含まれています drive
と carry
それぞれメソッド。 次に、と呼ばれる3番目のクラスを考えます Truck
. A Truck
両方を含める必要があります drive
と carry
メソッド:
export class Car {
drive(name:string) {
console.log(`This ${name} can drive very fast`);
}
}
export class Lorry {
carry(weight:number) {
console.log(`This vehicle can carry ${weight} kg`);
}
}
export class Truck extends Car, Lorry {}
1つのクラスしか拡張できないため、これは機能しません。
Outputerror: Classes can only extend a single class
これを解決するために、ミックスインを使用できます。
インターフェイスクラスの拡張と宣言のマージについて理解する
ミックスインを作成するために、TypeScriptの2つの機能を利用します。
インターフェイスクラス拡張
クラスとは異なり、インターフェイスはTypeScriptで複数のクラスを拡張できます。
interface A extends ClassB, ClassC {}
インターフェイスがクラスを拡張する場合、インターフェイスには実装が含まれていないため、クラスメンバーのみが拡張され、実装は拡張されません。
宣言のマージ
2つ以上の宣言が同じ名前で宣言されている場合、TypeScriptはそれらを1つのにマージします。
interface Alligator {
eyes: number;
nose: number;
}
interface Alligator {
tail: number;
}
const gator: Alligator = {
eyes: 2,
nose: 1,
tail: 1
};
gator
両方のプロパティが含まれています Alligator
インターフェイス。
ヘルパー関数の使用
TypeScriptのこれら2つの機能を活用することで、と同じ名前のインターフェイスを作成できます。 Truck
両方を拡張します Car
と Lorry
クラス:
export class Truck {}
export interface Truck extends Car, Lorry {}
宣言のマージにより、 Truck
クラスはとマージされます Truck
インターフェース。 これは、 Truck
クラスには、両方の関数定義が含まれるようになります Car
と Lorry
クラス。
を有効にするには Truck
から継承された関数を実装するクラス Car
と Lorry
、TypeScriptドキュメントにあるヘルパー関数を使用します。
この関数は、実装をコピーするクラスの名前を最初の引数として取ります(この場合は Truck
)そして、実装をコピーしたいクラスの配列を2番目の引数(この場合は Car
と Lorry
).
// the helper function
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)
);
});
});
}
そして、これがその使用方法です:
applyMixins(Truck, [Car, Lorry]);
これで、のメソッドにアクセスできます Car
と Lorry
から truck
物体。
const truck = new Truck();
truck.drive("truck");
truck.carry(10);
このコードは、次の出力を生成します。
OutputThis truck can drive very fast
This vehicle can carry 10 kg
これ truck
アクセスできます drive()
と carry()
.
結論
このチュートリアルでは、TypeScriptでミックスインを作成して使用しました。
ここから、インターフェイスにTypeScript宣言のマージを使用する方法を学びます。