Module Development in TypeScript

Jalibu

Hello developers,

some time ago I switched all my modules to TypeScript (feel free to check out MMM-Jast as a reference implementations).
Especially for more complex modules, TypeScript brings huge advantages from my point of view.
Since the MagicMirror platform doesn’t provide its own TypeDefinitions, I made them available via the DefinitelyTyped library.
For interested developers I also plan to provide some kind of TypeScript template module soon.

.
├── src
│   └── backend
│       ├── Backend.ts
│       ├── BackendUtils.ts
│       └── ...
│   └── frontend
│       ├── Frontend.ts
│       ├── FrontendUtils.ts
│       └── ...
│   └── types
│       ├── ABC.ts
│       └── ...
└── templates
│       ├── main.njk
│       └── ...
└── translations
│       ├── de.json
│       ├── en.json
│       └── ...
└── MMM-XYZ.js (generated)
└── node_helper.js (generated)
└── MMM-XYZ.css
└── tsconfig.json
└── rollup.config.json
└── README.md
└── package.json

Question: Are there any other developers among you who are interested in joining my “TypeScript” initiative? A little support from another developer in maintaining the type definitions would be helpful.

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);