Node-RED: Creating a custom node using TypeScript
Welcome! In this brief article, I will outline how to create a custom Node-RED node using TypeScript.
I have published a small library that allows TypeScript to be used in Node-RED. If you just want to use it, you can find it here. If you are interested in how it works, I invite you to keep reading!
Node-RED is a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways.
Work on my Master’s thesis gravitated towards creating some Node-RED nodes. Being an avid fan of TypeScript and its benefits, I decided to research the topic of developing nodes using the language, instead of the recommended ES5 “classes”. This article outlines how I achieved a solution.
A custom Node-RED node is mainly comprised of a
.js and a
.html file. The goal of this post is to show how to replace the
js file with a
Understanding the Vanilla Way
Reusing the example present in the official documentation, we will be building a node that transforms the messages it receives into all lower case letters.
For this, two files are necessary, namely
lower-case.js. Their function is outlined very well in the documentation:
The HTML file configures the settings and the interface displayed in the Node-RED’s web UI and, as such, is not very interesting for the purpose of this article.
This is how the official documentation requires a node to be structured:
Long story short, the
LowerCaseNode function is acting as a constructor of the
LowerCaseNode class. Inside the function,
this refers to the object being constructed.
Node-RED will then add some properties to the prototype of
LowerCaseNode, such as the
on() function we see on line 5. We will be leveraging this knowledge in order to use classes in TypeScript.
It should also be noted that we are passing the constructor of the class as the second argument of the
registerType function, on line 10.
Given these two pieces of knowledge, we can force the TypeScript compiler into generating the code we want.
target option present in
By setting the
target option to
"es5", we can obtain the ES5 code Node-RED expects.
tsconfig.json, we can finally dive into the actual code.
As said before, we’ll be using a class to write the
LowerCaseNode. This requires the constructor to have the same signature (line 3). Also, inside the constructor, we can now use
this, instead of the previous
var node = this; workaround.
Finally, we have to call
registerType passing the class itself as the second argument.
Note: You can play with the code on the TypeScript Playground to see how changes affect the output.
We can observe that the output is almost identical to the official Node-RED example. There is, however, a small change. The variable
LowerCaseNode (line 2) now refers to an Immediately Invoked Function Expression (read more) that returns the constructor of the
In the end, the difference is not problematic and the node will work as expected.
This concludes the small proof of concept that illustrates how to use Node-RED with TypeScript.
Hopefully, not only did you understand how to write a Node-RED node in TypeScript, but also why and how it works.
You can now test your own components in Node-RED using the constructs mentioned in this article.
Thank you for reading 👏
If you are interested in using a more higher-level (although still very basic) library, you can check the one I published.
Make sure to leave feedback, suggestions and/or corrections.