TypeScript Init—Getting A Test Driven TypeScript Repository Setup

May 02, 2018

The Engineering Team at Dollar Shave Club is excited about TypeScript. I’m excited too. When I started writing this post, I was not familiar with TypeScript beyond conversations and TypeScript’s getting started tutorials. In this post, I documented getting a TypeScript repository setup to compile, lint, and test TypeScript. While writing this post, I built a Linked List in TypeScript.

Tool Decisions

For this TypeScript exercise, I tried to use the same tools I’d use to build a plain old open source JavaScript repository—except in TypeScript.

In the table below I broke down the tools I tried to build my first Test Drive Development TypeScript repository.

Category

Initial

Final

Reason

Build

Rollup

TypeScript (TSC)

Rollup worked with minimal effort. I am user TSC because it means 1 less layer of abstraction.

Type Checker

TypeScript

TypeScript

TypeScript works well. The feedback in VS Code is immediate and offers clear messaging.

Testing

TS-Jest

TS-Jest

I was concerned about using TS-Jest because the documentation between it and Jest seemed confusing but it worked. I’m familiar with Jest so the switch was easy

Linting

TS-Lint

TS-Lint

TS-Lint works well in VS Code. As far as the CLI, I’m still not clear if TS-Lint is working.

Why I used TypeScript’s Compiler?

I initially setup TypeScript with Rollup. Rollup was compiling fine. It seemed like another layer of abstraction. To simplify the amount of configuration, I decided to use TypeScript’s compiler.

TS compiler options

Jest Testing and Linting—in TypeScript

The Dollar Shave Club team uses Jest for unit testing. Dollar Shave Club’s standard is for TypeScript projects is to test with TS-Jest. Using TS-Jest initially seemed scary but worked without problems. First I added the standard expect(1).toBe(1) test to ensure that my paths to unit tests were correct. Then I followed up with another quick test to ensure that my .ts files were imported correctly. From there, I added tests as I would writing Jest.

For linting, I used TS-Lint which extends ESLint. This took little time. I imported TS-Lint, added some configuration and a npm script—that was it. From there I was getting TypeScript Linting Feedback.

I added JSDocs so that I could make sure to document what the heck I was doing.

Problems I had getting started with TypeScript

I knew there were benefits to be had because some of my team had taken on TypeScript full on. That stated, I did have some frustrations getting setup. I don’t know if I would have pushed through the few hours of frustration for myself had I not had teammate support. I’d like to think I would have.

Here are some problems I had getting started

Listed below are problems I had getting started with TypeScript:

I had problems reading the TypeScript messages in VSCode

I had errors issues with imports in my tests (I spent a lot of time being frustrated here)

Sometimes I have to refresh VSCode after I’ve made minor changes to see if errors are actual errors

The solutions above are/were provided by me. I’m am newer to TypeScript. Use with caution but without fear or blame.

Conclusion: Why I will be using Types as much as possible

I’m not a rocket scientist—far from it. When writing code, I want feedback as quickly as possible as much as possible. After learning how continuous integration, linting and test driven development could help me improve, wanting more support from tools like TypeScript is a no brainer. TypeScript, I’ve found has not only helped me define Types but it also helps me break down code—making it simpler.

TypeScript Init—Getting A Test Driven TypeScript Repository Setup

This post documents getting setup with TypeScript—just beyond the Gettings Started TypeScript Tutorials. In this Post I will go through setting up a Test Driven TypeScript project.