The Record type in TypeScript

I can't count the amount of times I've defined an object type with unknown string keys and a specific value type.

type Scores = {
[key: string]: number;
}

And despite using it all the time, I can't for the life of me remember the [key: string] syntax.

Today, my problems are solved. Apparently TypeScript has a built in Record type that does exactly that:

type Scores = Record<string, number>;

Gary Bernhardt on tests and TypeScript

Confession: I don't write a lot of tests for my frontend code. This isn't something I talk about a lot because I'm scared of the pitchforks on the horizon.

I write React frontends with TypeScript. I don't don't write tests because I'm lazy, or because I don't have time, I simply don't see a lot of value in the amount of maintenance they require.

Gary Bernhardt wrote an article on how his apps are covered, and it hits the nail on the head.

We don't want tests covering most of our React components, though. That wouldn't help with the main difficulties in writing components:

  1. We might pass props around incorrectly. TypeScript already solves this problem for us almost completely.
  2. The components might use the API incorrectly. Again, we've solved this problem with TypeScript.
  3. The components might look wrong when rendered. Tests are very bad at this. We don't want to go down the esoteric and labor-intensive path of automated image capture and image diffing.

One thing I do write tests for is complex code that isn't coupled to components, like reducers. And the nail gets hit again:

Although we don't test components directly, there are some other parts of the frontend code that are tested directly. For example, we have some high-value tests around some React reducers because they're tricky and full of conditionals.

Read on Are Tests Necessary in TypeScript? executeprogram.com.

TypeScript with Laravel Mix

Since writing this post, TypeScript has become officially supported in Laravel Mix (version 0.12 and up). There's still some informative stuff in here if you're new to TypeScript, but use the official method if you're on a newer version of Mix!

In a recent Spatie project we decided to give TypeScript a shot for the business critical part of a new application. TypeScript provides static analysis to reduce the chance of introducing bugs, to have self-documenting code, and to improve our tooling (autocompletion!)

Read more