Module Development in TypeScript

strawberry 3.141

@jalibu there is a simple version of types in the main repo https://github.com/MichMich/MagicMirror/blob/master/module-types.ts

Jalibu

@strawberry-3-141
as you say, it is a very simple and incomplete version. And you can not install them as a package or use them in your modules, except if you copy the file.
In fact, that’s the real reason I created the typings on DefinitelyTyped.
You can find the sources here and the npm module here.

Henrik

@Jalibu That is really cool, I was thinking about how typescript could be used when developing modules. Like you say, it has huge advantages.
What is the current state of the “TypeScript initiative”? Did it get under way?

drdeath

Thank you very much for your great work! That is exactly what I needed. Coming from stringently typed languages like C and Java, ever since I discovered Typescript I find plain Javascript increasingly tedious.

FrostByte

Hi @Jalibu,

thanks for the typings.

To be honest, it’s not the best possible integration. The MagicMirror repository includes a module-types.ts file, containing the most important types, which I extended a little to fit my needs. A deeper integration, like being able to get correct typings/autocompletion for the this object in functions, is not available. If I find myself using it more in the future, I may look into improving this.

I want to share an little extension or may a solution for the problem quoted:

import type { Config } from "../types/Config";
import type { State } from "../types/State";

interface FrontendModuleProperties
  extends Partial<Module.ModuleProperties<Config>> {
  state?: State;
}

Module.register<Config>("MMM-XX", {
  defaults: {
    x: 29,
    y: "abc",
  },

  getStyles() {
    return ["z.css"];
  },
 <...>

  getTemplateData() {
    return {
      config: this.config,
      value: this.state?.value,
    };
  },

 <...>

  socketNotificationReceived(notificationIdentifier: string, payload: State) {
    if (notificationIdentifier === `ABC-${this.identifier}`) {
      const lastValue = this.state?.value;  // <-- Here lastValue got correct type automatically
      <...>
        this.state = payload;
    }
  },
} as FrontendModuleProperties);