Two Game Changing features in TypeScript 4.1

By

Today after vs-code made an automatic update, I stumbled over the announcement for the new features in typescript 4.1.

And it absolutely blew my mind. There was the feature, I have been looking for, for almost four years.

I often read over these feature announcements. But this time,… WOW.

In version 4.0 variardic tuples got added. They have been a huge step, allowing to define functions with variable argument lists.

In version 4.1 (wow) there are two features, that together are absolutely powerful, and I wonder if people understand its significance.

  • Template Literal Types
    This allows to write some logic to determine what values a type can have.

    1
    2
    3
    4
    5
    6
    7
    type Color = "red" | "blue";
    type Quantity = "one" | "two";

    type SeussFish = `${Quantity | Color} fish`;
    // same as
    //   type SeussFish = "one fish" | "two fish"
    //                  | "red fish" | "blue fish";
1
2
3
4
5
6
7
8
9
10
11
type Getters<T> = { 
  [K in keyof T as `get${capitalize K}`]: () => T[K]
}; 

interface Person { 
   name: string; 
   age: number; 
   location: string; 
} 

type LazyPerson = Getters<Person>;

There it is, mapping keys and renaming them with a little computation. This is so huge for developers of ORMs. Otherwise, today, some ORM require to basically define a schema twice, once for the data structure in the database and a second time for typescript. With this new feature a single definition can be enough.

Also validation libraries such as Joi, json-schema, superstruct, can get huge profit from this feature.

and then API frameworks, that have schema definition such as hapi, fastify, graphql, grpc can gain much better type intelliSence for autocompletion with these new features.

The benefits do not end in node.js backend. Also in client side, redux, react-hooks and other libraries, that generate APIs based on a js based type definition or value, will be able to provide awesome typescript user experience, without requiering microsoft to actively support the framework, as it happens with react, angular and vue. (still thank for all the effort making development experiences with these frameworks great)

Wow, are you also that excited about these updates? I believe they are game changing and and will improve our development experiences not only with typescript, but in the javascript ecosystem in a whole.

ps: The code samples are directly from the typescript blog, follow a link in this article to find more examples.

Contents