Mapped Types Explained: Keep Your Types in Sync Automatically - Advanced TypeScript

Template literals:

never type:

Mapped types are an essential feature every TypeScript developer should know about to write more robust and type-safe code.

In this video we will step by step rewrite an existing type using mapped types and will explore what the advantages are of letting TypeScript do the heavy lifting for us.
0:00 Intro
00:12 Mapped Types
6:27 Outro

[whotao]

The mapped type might be more succinct and useful if it didn’t have an “extends” in the keys and the original types were actually used. For example:

type MyType<T> = {
[K in key of T as `on.${Capitalize<Extract<K, string>>}`]: (value: T[K]) => any
}

When you iterate over the keys of some generic object, TS assumes that it’s “symbol | string | number”.

While these types aren’t strings, they’re still “string able”, i.e. you can use them in template strings like `prefix.${string | symbol}`. You could also “assert” that the key should be a string by using extract, e.g. Extract<string | symbol, string>. This automatically “returns” never if the key isn’t a string. It’s just a bit neater than having a nested extends directive; those should probably be reserved for omitting keys based on the original value.

[malvoliosf]

Waiting on the definitive `never` video...

[antonodman]

Great video! Short and interesting, very valuable knowledge. Subbed! :)

[JayTailor]

Fascinating video. I'm really looking forward to learning more.

[dennis_benjamin]

Great interesting video and really well explained. But also this is why I think typescript is awefull and can become extremely hard to read. In a fully typed language you would just have a class for every event inheriting from a common parent class. You would have a service which has an overloaded onEvent method for each Event and you are fine.

[TimaGixe]

Nice video with great explanations. By the way, what IDE do you use?

[jishnuviswanath]

Nice video. First time watching you. Thank you algorithm.

PS: what's the blue concentric circle with red up arrow in your editor?

[Caldaron]

Extract<keyof T, string> does the same as the extends and doesnt need the ternary. Makes it a bit cleaner, credits go to ChatGPT ;-)

[tngerik]

Amazing content.

I'd like to know how did you setup that " // ^? " functionality to see type information permanently in the editor. You used it in previous videos. Is it a plugin? I can't find out anything about it and it doesn't work in VSCode and IntelliJ

[nadavgover]

Cool! What if one of the properties Events are optional?

[GreggBolinger]

Dear lord, just use an interface. This is why Typescript code bases become unreadable. It's good information, don't get me wrong. But it isn't a great example of how to apply this.

[DemiGoodUA]

It looks like an anti-pattern in typing. You are writing code in types. Types should describe the data, not the process of acquiring it. Use “if” and generalization in code, not in types.

[pierwszywolnynick]

Please don't ever do this in real code. You can add "satisfies" and this magic after but keep types simple, so no one needs to spend more than 5 seconds looking at them