This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Examples of TypeScript

Mixins.Copy the code

Mixins is an important concept in object-oriented programming. Its idea is to mix the contents of two objects or classes together, so as to realize some functions reuse.

The object with

/ / 1
let obj1 = {
    name: 'bare'
}
let obj2 = {
    age: 20
}
Object.assign(obj1, obj2)
console.log(obj1);   // {name: 'bare', age: 20}
Copy the code

Object.assign() is a method provided by ES6 for Object merging. It copies all the enumerable attributes of the source Object to the target Object. The first argument to this method is the target object, and from the second argument onwards it is the source object.

/ / 2
let obj1 = {
    name: 'bare'
}
let obj2 = {
    name: 'panda'.age: 20
}
Object.assign(obj1, obj2)
console.log(obj1);   // {name: 'panda', age: 20}
Copy the code

If the target object has an attribute with the same name as the source object, or if multiple source objects have an attribute with the same name, the following attribute overrides the preceding one.

The class into

We’ve already seen extends, which only allows a subclass to inherit from a parent class. You can also connect multiple reusable classes in TypeScript through implements. And a prototype chain is used to connect methods of subclasses to methods of superclasses.

/ / 3
// Teacher Mixin
class Teacher {
    isTeacher: boolean;
    teach(){}}// Singer Mixin
class Singer {
    isSinger: boolean;
    sing(){}}Copy the code

Example 3 defines the Teacher and Singer classes as mixins. You can see that both classes define only one specific behavior or function.

// Example 4
class MusicTeacher implements Teacher.Singer{
    isTeacher: boolean = true;
    isSinger: boolean = true;
    teach: () = > void
    sing: () = > void
}
Copy the code

Example 4: Create a new class and connect multiple parent classes via the implements keyword, then implement all the interface definitions in the subclass, creating placeholder properties for the properties and methods to be mixin.

/ / case 5
applyMixins(SmartObject, [Disposable, Activatable]);

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor= > {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name= > {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}
Copy the code

Example 5 mixes mixins into defined classes to complete the implementation. Create applyMixins function is the function of using Object. GetOwnPropertyNames () all the attributes on the traversal mixins, and copied to the target, before the placeholder attribute to replace the real implementation code.

Mixing ideas is not very common in everyday business development, but it is widely used in open source projects such as vue-class-Component.

Finish this! If this article helps you at all, please give it a thumbs up.