TypeScript 5.0 for JavaScript devs
Tags: javascript, typescript, jsdoc, news
Published: 2023-03-20 15:57:12

The [TypeScript 5.0](https://devblogs.microsoft.com/typescript/announcing-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:

```js
/** @type {Foo} */
const abc = data;
```

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:

```js
/** @satisfies {Foo} */
const abc = data;
```

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](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#satisfies-support-in-jsdoc).

##  `@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](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#overload-support-in-jsdoc).

## Other notable news

The new [`--allowImportingTsExtensions`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#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`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#supporting-multiple-configuration-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`](https://github.com/voxpelli/tsconfig) configuration + may perhaps restructure it a bit eventually to enable use with multiple `extends`.

Head on over to [voxpelli/types-in-js](https://github.com/voxpelli/types-in-js) and read more about using types in JS and share [your favorite additions](https://github.com/voxpelli/types-in-js/discussions/20) lately 🙏