DEV Community

Pelle Wessman
Pelle Wessman

Posted on

TypeScript 5.0 for JavaScript devs

The TypeScript 5.0 release brings a good amount of news for us who use it with JavaScript / JSDoc.

This time around we get two whole new keywords, @satisfies and @overload, and they are a big step towards feature parity with TypeScript itself.

On top of this we get some other goodies as well, which I'll go through in the end of this post.

satisfies – non-lossy type validation

When we have a piece of data that we want to ensure is of type Foo we do eg:

/** @type {Foo} */
const abc = data;
Enter fullscreen mode Exit fullscreen mode

If Foo has a property .type that is 'car'|'bike', then we will not know which of the two abc will have, no matter if we know that data.type was bike.

We can now instead write:

/** @satisfies {Foo} */
const abc = data;
Enter fullscreen mode Exit fullscreen mode

That will ensure that we simply ensure that abc satisfies the type of Foo, it will not make us lose any of the details of data.

For more info, check out the announcement post at the TypeScript blog.

@overload – enabling function overloading in JS

The announcement post at the TypeScript blog summarised this one well:

Each JSDoc comment with an @overload tag is treated as a distinct overload for the following function declaration.

In other words, we can now easily specify when eg. a second argument can or can not be specified to a function.

This is something that has been possible in TS for a long long time, now finally we can do it in JS as well. Great for those few times where it can make the code much more readable.

For more info, check out the announcement post at the TypeScript blog.

Other notable news

The new --allowImportingTsExtensions is great for when we need to specify a file extension when importing (I'm looking at you ESM) and you need to import a .d.ts file (a useful thing when it gets too verbose or hard to write your types in JSDoc). Only allowed when --noEmit or --emitDeclarationOnly is enabled, which is true for all JS projects.

Also: Support for multiple files in extends can be helpful, especially when sharing a common config with TS projects.

Conclusion

I'm in love with @satisfies and will use it plenty. I will probably also add --allowImportingTsExtensions to a future version of my shared @voxpelli/tsconfig configuration + may perhaps restructure it a bit eventually to enable use with multiple extends.

Head on over to voxpelli/types-in-js and read more about using types in JS and share your favorite additions lately 🙏

Top comments (0)