A Christmas gift!
How I ended up writing my own TypeScript transpiler…
At last Christmas! This time of the year when we can have some time to do what we enjoy the most: Coding!?
But coding for fun. Without having to browse ugly code with some awful designed tools. No, I mean fun coding. Nice, clean, easy to read code in a simple robust enjoyable prototyping environment. But where to start looking to find this kind of a dream setup?
My list to Santa starts with something like:
For a long time, a rebuffed JavaScript. It was (and still is) not strongly typed and was missing all the constraining features that help to make the code more robust and easier to apprehend.
All of that changed in 2015 with ES6 which brought classes with private members and read only constants. And some functional sugar like a variety of array iterators. All things that makes programming in JavaScript a more enjoyable experience. [6]
But you know when prototyping, what starts with a single page project can rapidly become a multi-files mess. At this stage, keep using a text editor is a waste of energy. But this is not an issue since there are really good tools exactly for that, here comes VS Code (in dark mode, of course!).
So now you have access to all your files without needing to switch from applications to applications just to browse your code. But yet, JavaScript is not an easy language to browse. I mean, if you compare it to TypeScript for instance.
TypeScript is tempting. It provides easy navigation, and can detect many errors in the way of a static compiler. You also have access to code completion, references, definitions, declarations. All niceties that are appreciated when working with a respectable codebase.
But TypeScript is a no go for me.
When you start committing to it, you always end up trying to satisfy its type mechanism. Your program becomes more complex not because of the problem you try to solve but because of the inherent complexity that TypeScript has created by itself.
And once you succeed, you are left with unreadable JavaScript that has been transpiled by a machine for a machine. Or worse, you may have to use WebPack, a brittle engine that manages non debuggable code. If you have time to spend or are paid to do so then ok, but if you just want to go ahead with your prototype, it is certainly not the way to go.
What’s wrong with TypeScript?
The TypeScript developers are no longer concerned about JavaScript which they see as some kind of underlying machine language.?
Indeed, they need to spend their time working to fix the more interesting (and surely more complex) issues they have created themselves with their convoluted typing system.
This is why they explain very seriously that TypeScript developers should not be “forced” to use the JS private field syntax. But they do not care to “force” the JS developers to use their own unreadable transpiled functions instead. [4]
So what’s left?
My searches lead me to JSDoc. [8] This is one of many frameworks that allow you to write type annotations into comments. Doing so allows you to access some of the goodies that TypeScript does but at the expense of code clarity. And this is not good. I have always hated comments in code. Indeed, you should spend more time cleaning the code than providing good comments (aka Clean Code) [2]
"Comments do not make up for bad code.” -- By Robert C. Martin (Author of Clean Code) [3]
But the real issue for me was the way the comments were structured, using the multiline comment format /* */. This was a no go for me. Indeed, when prototyping I use that feature quite often when tinkering with my code so this would obviously be in my way. That and the feeling of losing my time commenting the code, of course.
领英推荐
But this detour was inspiring in a way. What if we could put the type annotations directly in the code? This of course would make the code not workable on the browser but this would be much more clean than living with bloated comments.
There is a simple way to implement this and...
It is called TypeScript!
So I gave it another chance... And again I was turned off by its transpiler (aka TSC).
It seems there is no way to use even the simplest JavaScript features without the transpiler to bloat the output with useless extraneous unreadable code. Of course TSC comes with many configurations but at the end none of them can get rid of all the uselessly generated blather that comes out of it.
Spending days into it, I went across Babel which also provides a TypeScript transpiler that is even more configurable (...). But in the end, the resulting code was even worse than with TSC. This is understandable since those tools are not meant for prototyping. They have been built for supporting many versions of all the browsers in a production environment.?But they feel the weigth of their legacy.
This is then that I realized the only thing I had to do was to skim off the type annotations from my pseudo TypeScript code. No need for a complex tool to do that. Indeed a couple of JavaScript functions and the trick is done. Of course this is still a single page application and it is in no way intended for production, but there are already many tools for this anyway.
Et voilà!
I now have the best of both worlds.
Where is my gift?
For those who are interested, I have released a public version of the transpiler on Github: https://github.com/lintense/SimplyTranspile
And now you too can have the best of both worlds!
Merry Christmas time to all!
References
[1] Sunshine image by AINSWER, consulted December 19th, 2023. https://ainswer.net/en/question/how-big-is-the-sun-compared-to-earth
[2] Summary of Clean Code by Robert C. Martin, consulted December 19th, 2023.?https://gist.github.com/wojteklu/73c6914cc446146b8b533c0988cf8d29
[3] The Art of Code Comments: Does Good Code Need Comments? by Robert C Martin, consulted December 19th, 2023.?https://www.alibabacloud.com/blog/the-art-of-code-comments-does-good-code-need-comments_600184
[4] The future of the "private" keyword #31670, consulted December 19th, 2023.?https://github.com/microsoft/TypeScript/issues/31670
[5] Ivory tower image by OfTheDunes, consulted December 19th, 2023.?https://www.deviantart.com/ofthedunes/art/Ivory-Tower-105123636
[6] The ES6 Revolution: Building Better JavaScript Applications by JT’s blog, consulted December 19th, 2023.?https://jtsofttech.com/post/the-es6-revolution-building-better-javascript-applications
[7] Birthday colorful present box design, consulted December 19th, 2023 https://www.freepik.com/free-psd/birthday-colorful-present-box-design_40455424.htm
[8] Getting Started with JSDoc 3, consulted December 19th, 2023. https://jsdoc.app/about-getting-started