Introducing HaTs

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.

(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.

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.³

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 pipeline⁴ in order to get the most from TypeScript– i.e. how to streamline all the tasks along your build and deployment steps.

On my mama⁵ 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.

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 HaTs⁶

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 tandem⁷

1. HaTs CLI – https://npmjs.com/package/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.

2. TypeScript Template Repo – https://github.com/hats-dev/hats-template-library

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

3. Docs – https://hats.dev

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.