Combining TypeScript and JavaScript for efficient mixins

Question

Combining TypeScript and JavaScript for efficient mixins

I came across an article on MDN discussing the usage and creation of mix-ins (link). Intrigued, I decided to try implementing it in TypeScript:

type Constructor = new (...args: any) => any;

function nameMixin(Base: Constructor) {
  return class extends Base {
    #name?: string;

    name() {
      return this.#name;
    }

    setName(name: string) {
      this.#name = name;
    }
  };
}

class None {}
class Foo extends nameMixin(None) {
  constructor(private value: number) {
    super();
  }
}

const foo = new Foo(10)
foo.setName("john")
foo.name()

This implementation seems to work well, but one thing that bothers me is having to extend the arbitrary None class.

I've seen others use

Object.assign(Foo.prototype, mixin)

for mix-ins, where mixin is an object. However, I find this approach decouples the mix-in from the declaration.

Do you know of any cleaner ways to implement mix-ins?

javascript typescript dynamic subclass mixins

Answer 1

Answer №1

"Does anyone have suggestions for cleaner ways to implement mixins?"

In my perspective, the most versatile approach among the various methods of implementing mixins in JavaScript is a function-based mixin that understands the this context, ensuring it is always applied using call on the object requiring the mixed-in functionality.

One significant advantage is that this method always operates within a delegated/bound this and can receive variables such as strings, numbers or even object references at application time. These variables can serve as privately shared (and potentially mutable) state between multiple mixins implemented similarly and the classes/factories creating objects with mixed-in behavior.

// Function-based mixin aware of `this` context.
function withSetGetName(name = '') {

  // Bound `this` context.
  Reflect.defineProperty(this, 'name', {

    // Retrieve locally scoped variable.
    get: () => name,

    // Control changing the value of the private variable.
    set: (value) => (name = value),
  });
  return this;
}

class Foo {
  #number;

  constructor(name, number) {
    this.#number = number;

    // Apply function-based mixin.
    withSetGetName.call(this, name);
  }
}

// Instance of class with mixin.
const foo = new Foo('Jim', 10);

// Plain object with mixed-in behavior.
const bar = withSetGetName.call({});

console.log(
  'foo.name =>', foo.name
);
console.log(
  "foo.name = 'John' =>", (foo.name = 'John')
);
console.log(
  'foo.name =>', foo.name
);

console.log(
  'bar.name =>', bar.name
);
console.log(
  "bar.name = 'Jane' =>", (bar.name = 'Jane')
);
console.log(
  'bar.name =>', bar.name
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

Answer 2

"Does anyone have suggestions for cleaner ways to implement mixins?"

In my perspective, the most versatile approach among the various methods of implementing mixins in JavaScript is a function-based mixin that understands the this context, ensuring it is always applied using call on the object requiring the mixed-in functionality.

One significant advantage is that this method always operates within a delegated/bound this and can receive variables such as strings, numbers or even object references at application time. These variables can serve as privately shared (and potentially mutable) state between multiple mixins implemented similarly and the classes/factories creating objects with mixed-in behavior.

// Function-based mixin aware of `this` context.
function withSetGetName(name = '') {

  // Bound `this` context.
  Reflect.defineProperty(this, 'name', {

    // Retrieve locally scoped variable.
    get: () => name,

    // Control changing the value of the private variable.
    set: (value) => (name = value),
  });
  return this;
}

class Foo {
  #number;

  constructor(name, number) {
    this.#number = number;

    // Apply function-based mixin.
    withSetGetName.call(this, name);
  }
}

// Instance of class with mixin.
const foo = new Foo('Jim', 10);

// Plain object with mixed-in behavior.
const bar = withSetGetName.call({});

console.log(
  'foo.name =>', foo.name
);
console.log(
  "foo.name = 'John' =>", (foo.name = 'John')
);
console.log(
  'foo.name =>', foo.name
);

console.log(
  'bar.name =>', bar.name
);
console.log(
  "bar.name = 'Jane' =>", (bar.name = 'Jane')
);
console.log(
  'bar.name =>', bar.name
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

Combining TypeScript and JavaScript for efficient mixins

Answer №1

Similar questions

Loop through each instance of a data record in a JSON document using Vue's v-for directive

Identifying the HTML Hidden Attribute Using JavaScript Without Dependencies

Maintaining the $index value across all pagination pages in AngularJS while matching it with the items in the data list

How to Avoid Duplicating Documents in MongoDB?

Mapping JSON data from an array with multiple properties

When loading a page with Puppeteer using the setContent method, images may not be loaded

Tips for choosing and deselecting data using jQuery

Using Javascript to change CSS in a Polymer application

Challenges with window opening function while already in fullscreen view

It is impossible to alter the data contained within the input box

NodeJS not recognizing global variable causing it to return undefined

Troubleshooting Tips: Removing a Specific Line from a Canvas Using Javascript

Pass user input values to PHP via AJAX and display the outcome on a designated div

Guide to pinpointing a location with Google Maps

The functionality of the Hubot script is restricted to Slack conversations where I initiate a direct message with the

Assistance needed in extracting the body content utilizing javascript or jquery

transform JSON data into XML format with the help of JavaScript

Choose a selection in ExtJS by finding matching attributes

Error encountered during Typescript compilation: The attribute 'raw' is not found within the context of the entity 'e' in express

Preserving the "height" declaration in jQuery post-Ajax request (adjusting height after dropdown selection loads product information, resetting heights of other page elements)