Skip to content

Instantly share code, notes, and snippets.

@calebdwilliams
Created July 15, 2020 14:17
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save calebdwilliams/d5ccdcc4aa8a190fd41cc8422af46305 to your computer and use it in GitHub Desktop.
Save calebdwilliams/d5ccdcc4aa8a190fd41cc8422af46305 to your computer and use it in GitHub Desktop.
Mixin annotation with JSDoc and TypeScript
import { LitElement } from 'https://cdn.pika.dev/lit-element@^2.3.1';
/** @typedef {new (...args: any[]) => any} Constructor */
/**
* @template {!Constructor} T
* @param {T} superclass - The class to extend
*/
const FormControlMixin = (superclass) =>
class FormControl extends superclass {
/** @type {boolean} */
get checkValidity() {
return /* some magic */
}
}
/**
* @template FormControlMixin, LitElement
*/
class MyInput extends FormControlMixin(LitElement) {
/**
* TypeScript now recognizes this has checkValidity
* as well as all of LitElement's classes
*/
}
@trusktr
Copy link

trusktr commented Oct 24, 2021

Wow, it is so great that TypeScript mixins are supported in plain JS with JSDoc now! Yes!! I think for a while this was not possible without the {!Constructor} syntax to enforce that T extends from that.

@ankianan
Copy link

I tried it with two mixins, and it didn't work as expected.

@calebdwilliams
Copy link
Author

Yeah, it’sa bit of I think. I’ll try to update.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment