I have been looking for a small example of how to create a mixin, but there wasn't one.

So far I was able to come up with the following snippet:

import { LitElement, property } from 'lit-element';

type Constructor<T = object> = {
  new (...args: any[]): T;
  prototype: T;
};

export interface ReadonlyInterface {
  readonly: boolean;
}

export const ReadonlyMixin = <T extends Constructor<LitElement>>(
  base: T
): T & Constructor<ReadonlyInterface> => {
  class ReadonlyMixin extends base implements ReadonlyInterface {
    @property({ type: Boolean }) readonly: boolean = false;
  }
  return ReadonlyMixin;
};

Some things that I learned before I was able to make it work:

• I started by tweaking the code from model-viewer (which has mixins) 🤓
• I found this article useful to understand the Constructor type 🔖
• I stumbled into Decorators not allowed classes expressions microsoft/TypeScript#7342 and False error TS4094: ... exported class expression may not be private or protected. microsoft/TypeScript#30355 (as well as related PR at Revert mixin type inference google/model-viewer#761) 🤔
• Finally, I found a working example at stackoverflow 🙂

Overall it was a bit challenging to figure that out 😅 So the example would help a lot.

@justinfagnani @cdata can you please confirm if the code snippet above is correct? Also, do you have any other guidelines about how mixins should be written in TypeScript?