Skip to main content

Introducing HaTs

Kamar Mack ·

HaTs logo

HaTs is a super easy tool that improves your TypeScript development workflow. Read on to learn more about the HaTs origin story, or try it out here

Let's Face It...

Most programmers who have crossed paths with TypeScript have at least one horror story where the entire project felt as though it were imploding – likely during the lint or build step.

If you've been in this position, you were probably forced to:

  1. Take endless trips down the Stack Overflow rabbit hole,
  2. Litter your codebase with type any (👎🏾 defeating the whole purpose of TS), or
  3. Bail out with directives like @ts-ignore and eslint-disable-next-line

HaTs is designed to help you navigate the mayhem that comes with TypeScript projects, so you can focus on finishing your features instead of fighting flames.

Taking the TS Plunge

Like most JavaScript devs who convert to the dark side, I only picked up TypeScript after I'd exhausted all my options with vanilla JS: applying strict mode everywhere, annotating with JSDoc syntax, even pair programming with my dog.

Programming puppy
Translation – "There aren't enough treats in the world to make me code without type definitions"

(Despite the fact that I still had room to improve my regular ole JavaScript skills 😭) I finally had to acquiesce to the fact that I needed a more powerful toolkit if I were going to survive.

I needed more precision.

I needed TypeScript.

What's So Special about TypeScript?

TypeScript was a promising beacon of hope for me, the silver bullet that would complete my programming arsenal.

I knew that programming with a type system could help me retain all my favorite parts about JavaScript development and like magic fix all the growing pains I'd been experiencing while scaling up to larger, more sophisticated projects.

Things I Love about JS Things I Hate about JS
Simple language design and API Weird quirks: truthiness rules, typeof null is 'object', double vs. triple equals. The list goes on.
The umptillion npm packages and frameworks targeting frontend and backend Projects written in vanilla JS are not "self-documenting" without addons such as JSDoc

The JS spec1 and NodeJS are well documented

CommonJS, ES6, and UMD each play by their own rules

Performant parsing and execution2

Even with strict mode and a linter, JS is too forgiving. Large projects are pretty much guaranteed to have edge cases that throw unanticipated errors.

Caveats and Fine Print

For the most part, my intuition was correct. TypeScript, and the rich ecosystem surrounding it, does offer all the tools necessary to solve JS development pain points.

But at the onset of my TypeScript journey, I got the wrong impression that all I needed to do was knock out a few quick file renames from **.js to **.ts and BOOM I'd be a full-fledged TS dev.3

It quickly became apparent however that TypeScript does not simply start working out of the box. In reality, each TypeScript project requires that, at minimum, you have the following in place:

1. Precise project organization

You must structure your TypeScript projects properly. This means getting each of these correct in your repository:

  • File system layout
  • Environment configurations
  • Dependencies

Without precise organization you're hustling backwards. TBH a TypeScript project that is poorly organized and/or improperly configured will end up worse off than a vanilla JS alternative.

2. Streamlined CI/CD

All TypeScript projects will at some point require you to master boatloads of advanced programming concepts, and your specific menu will vary by project (i.e. problem domain, target JS runtime, frameworks you implement, and so on).

Regardless of your use case, you absolutely must learn the process of using a CI/CD pipeline4 in order to get the most from TypeScript– i.e. how to streamline all the tasks along your build and deployment steps.

On my mama5 there is no way to write TypeScript without good CI/CD in place. Chief among the many, many reasons for this is TypeScript's requirement that your source code get compiled before consumers of your module can actually run it.

Closing the Knowledge Gap

To get myself up to speed I binge read Pro Git by Scott Chacon and Ben Straubboth, Patterns for Managing Source Code Branches by Martin Fowler, and the TypeScript Handbook ... each in its entirety.

Respectively, these three masterpieces cover:

  • Git's history, philosophy and command line techniques
  • Git workflow patterns that help software teams to achieve both stability and efficiency in the development process
  • Innerworkings of the TypeScript language and how to tune the compilation process

They took a good minute to finish. I can't even lie.

Naruto meme
"There's no shortcut to becoming hokage"

But these investments of time were well worth it, and I highly recommend that TypeScript devs read all three (and all devs read the first two)!

OK ... cool. So what's HaTs?

Armed with this knowledge, I decided to put everything I learned into an open source project. Now I'm proud to announce the release of HaTs6

HaTs is a command line tool for TypeScript authors that preconfigures TS projects for a smooth development workflow. Its goal is to save you precious dev time and protect your mental real estate.

How it Works

HaTs works by streamlining the laundry list of repetitve, error-prone tasks required to start new TypeScript projects and complete development cycles:

🛠 Bootstrapping fresh projects

The hats create command triggers the HaTs CLI to shallow copy and customize a TypeScript template project. It also initializes a local repo for your machine and remote repo for your GitHub account.

📝 Configuring your environment

When bootstrapping your project, HaTs injects your project-specific data into the template's "placeholder" slots. Project settings you pass to the CLI get merged with (1) your machine's git configs and (2) any HaTs system configs you've saved.

Afterwards, dozens of packages in the TypeScript ecosystem such as Jest and TypeScript ESLint will work for you out of the box.

Enforcing Good CI/CD Habits

In HaTs projects, the package.json scripts property contains the implementation to automate execution for seven of the most important CI/CD tasks:

  1. Testing ⤵
  2. Linting ⤵
  3. Enforcing code style ⤵
  4. Syncing local changes to your remote ⤵
  5. Prepping for a new release with a new changelog entry ⤵
  6. Building ⤵
  7. Finally ... Publishing 🚀

Simply use the npm run X syntax from the command line to execute any of these tasks.

Under the Hood, HaTs has three projects working in tandem7

  1. HaTs CLI –

The interactive hats-cli package is the muscle of the project. When installed globally, it can bootstrap fresh TypeScript projects on demand and manage (persistent) HaTs settings on your machine.

  1. TypeScript Template Repo –

The HaTs template repo on GitHub provides the basis for the file system in each new HaTs project

  1. Docs –

Lastly, the static NextJS homepage features the HaTs Quick Start guide and documentation. This is the best place to start if you're interested in trying out HaTs for yourself.

Supporting HaTs

The easiest way to show some love to the HaTs project is to head over to the main GitHub repo and drop a star ⭐

Also - if you're a programmer who's interested in contributing to HaTs, PRs are welcome! To propose a new feature or bug fix, see the Contributing Guidelines.


Major shoutout to Mozilla for the clean revamp.
9 times out of 10 you can stay within performance budget by writing good JS and optimizing your build. Only niche use cases require you to reach for Go, Rust, and committee.
Especially because VSCode automagically started providing nice intellisense hints with just this small change.
Ideally, some DevOps wizard on your team will handle this for everyone and drop you in a pit of success. But if that doesn't apply, the HaTs defaults will help you get on the right track.
That means I'm telling the truth for a fact.
In case you were curious, HaTs is short for Happy TypeScript, which apparently makes it a "euphonious acronym" according to allacronyms. The name is emblematic of the goal I had going into the project – to change my own TypeScript development experience from a tedious, confusing, and frustrating dogfight 😢 into something efficient, simple, and fun 😎
Just like Thug, Gunna, and Wheezy, HaTs is a 3-Headed Snake.

About me

I'm Kamar, a software engineer from Memphis, TN – I specialize in frontend React and server-side NodeJS development. Thanks for reading!