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!

Photo by John Barkiple on Unsplash

Node-RED is a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways.

Motivation

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.

Introduction

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 ts file by leveraging the knowledge of how JavaScript works and making use of the TypeScript compiler.

Note: As of the writing of this article, I haven’t found a way to replace the JavaScript in the HTML file with TypeScript. Anyhow, the amount of JavaScript in this file is generally so reduced that the benefit earned by using TypeScript in this context would be small.

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.html and lower-case.js . Their function is outlined very well in the documentation:

[Nodes] typically consist of a pair of files; a JavaScript file that defines what the node does, and an HTML file that defines the node’s properties, edit dialog and help text.

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.

The JavaScript file is the one that effectively implements the logic of the node and so this is the one we’ll be looking into more closely.