Pre-processing my TypeScript project using 🎩 Gents

In my spare time (whatever that’s supposed to mean) I’ve been iterating slowly on a web game. It’s neat, using web technologies like Angular, PWAs, and serverless to make the deployment process straightforward.

Adding Angular is somewhat recent. Rewriting the game’s frontend to TypeScript has actually been really useful in ensuring the game is reliable with each release.

Because admittedly I’m not a very good programmer. I make a lot of mistakes, and in a hobby context I’m really not putting in enough time on writing high-quality tests with fantastic coverage. I lean very heavily on TypeScript to ensure what I’m writing makes sense.

As this game has evolved, I have run into some issues at scale. Typos can happen, and I don’t always think to change everything consistently. This means players have run into null-pointer exceptions or places where the code is just inconsistent.

Over time, I’ve organically moved to improving my development workflow to improve type coverage ahead of time so that I never face one of these mistakes again. It’s a work in progress, but I do want to share one outcome of this project called 🎩 Gents.

README opening

Item Management

Here’s one example. In this game, players can collect items. Each item is represented by a key, which is a string. I have a map which lets me grab more details about that item.

Okay, now I want to be able to use the recovery field by healing characters. How do I ensure that the selection parameter is a valid item?

Now let’s say I also want to distribute items as prizes after certain gameplay events. How do I ensure that the prize in the array is actually a valid item rather than a typo? I may accidentally write ‘potin’ and suddenly players will have invalid items in their inventory until I discover it.

TypeScript has been useful in allowing me to develop types which can minimize the list of possibilities. If the item key isn’t one of a few instances, the compiler will throw an error until I fix it.

However, how do I convert the keys of a map into a type? TypeScript doesn’t really let you do this. I could maintain a separate list of item types that’s used as the input to the map, but that starts to add complexity to a project that I don’t really have a lot of time to manage.

So I ended up developing a type pre-processor called 🎩 Gents, and it can be downloaded from NPM now.

@fleker/gents

Creating a gents file

The way this works is very simple. You start with a .gents file. This is a Node.js script that you will use to programmatically generate your files. Basically you’re just running some code and printing the expected output with console.log.

This is very simple, and that’s all it needs to be. I’m not looking for anything too complicated, just a way to convert my items map into a type.

When I run the command line script, it will scan my directory for all .gents files and convert them to a .ts file of the same name.

Now when I go back to battle-rewards.ts file, I can update the type away from string and to something more specific. Now the TypeScript compiler is able to catch my typo and ensure that things are just a bit safer.

Wrapping Up

This is just the v1.0.0 release. Now you may be asking what’s next. Nothing. Honestly I’m happy with the project at this point and I don’t really see anything else that needs to be done.

But if you have any ideas, add an issue or file a pull request on the GitHub page.

GitHub - Fleker/gents: Type-generation pre-processor for TypeScript