Mezclas de TypeScript

Introducción

En TypeScript, no podemos heredar o extender más de una clase, pero Mixins nos ayuda a solucionar este problema.

Los mixins crean clases parciales que podemos combinar para formar una sola clase que contenga todos los métodos y propiedades de las clases parciales.

Nota: La documentación describe el enfoque de este tutorial como un “Patrón alternativo”.

En este tutorial, creará y utilizará mixins en TypeScript.

Comprender las limitaciones de las clases

Creemos un ejemplo para que podamos demostrar el valor de los mixins.

Consideremos dos clases, Cary Lorry, que contienen los métodos drivey carryrespectivamente. Luego, consideremos una tercera clase llamada Truck. A Truckdebe incluir ambos métodos drivey carry:

aplicación.ts

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 {}

Esto no funcionará porque solo podemos extender una única clase.

Outputerror: Classes can only extend a single class

Para solucionar esto podemos utilizar mixins.

Comprensión de la extensión de clases de interfaz y la fusión de declaraciones

Para crear un mixin, aprovecharemos dos funcionalidades de TypeScript:

Extensión de clase de interfaz

A diferencia de las clases, las interfaces pueden extender múltiples clases en TypeScript .

aplicación.ts

interface A extends ClassB, ClassC {}

Cuando una interfaz extiende una clase, extiende sólo los miembros de la clase pero no su implementación porque las interfaces no contienen implementaciones.

Declaración de fusión

Cuando se declaran dos o más declaraciones con el mismo nombre, TypeScript las fusiona en una .

aplicación.ts

interface Alligator {  eyes: number;  nose: number;}interface Alligator {  tail: number;}const gator: Alligator = {  eyes: 2,  nose: 1,  tail: 1};

gatorcontiene propiedades de ambas Alligatorinterfaces.

Uso de la función auxiliar

Al aprovechar estas dos funcionalidades en TypeScript, podemos crear una interfaz con el mismo nombre que las clases y Trucky ampliarlas :CarLorry

aplicación.ts

export class Truck {}export interface Truck extends Car, Lorry {}

Debido a la fusión de declaraciones , la Truckclase se fusionará con la Truckinterfaz. Esto significa que la Truckclase ahora contendrá las definiciones de funciones de las clases Cary Lorry.

Para permitir que la Truckclase implemente las funciones heredadas de Cary Lorry, usaremos una función auxiliar que se encuentra en la documentación de TypeScript .

La función toma el nombre de la clase a la que queremos copiar las implementaciones como primer argumento (que en nuestro caso es Truck) y toma un array de clases de las que queremos copiar las implementaciones como segundo argumento (que en nuestro caso es Cary Lorry).

aplicación.ts

// the helper functionfunction 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)      );    });  });}

Y así es como se usa:

aplicación.ts

applyMixins(Truck, [Car, Lorry]);

Ahora podemos acceder a los métodos en Cary Lorrydesde un truckobjeto.

aplicación.ts

const truck = new Truck();truck.drive("truck");truck.carry(10);

Este código producirá el siguiente resultado:

OutputThis truck can drive very fastThis vehicle can carry 10 kg

Esto truckpuede acceder drive()y carry().

Conclusión

En este tutorial, creó y utilizó mixins en TypeScript.

Desde aquí, aprenda cómo utilizar la fusión de declaraciones de TypeScript para interfaces .