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 = { [K in key of T as `on.${Capitalize}`]: (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. 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.
@Typed-Rocks12 күн бұрын
Looks great
@antonodman5709Ай бұрын
Great video! Short and interesting, very valuable knowledge. Subbed! :)
@malvoliosfАй бұрын
Waiting on the definitive `never` video...
@Typed-RocksАй бұрын
Thank you 🙏 Working on it
@Typed-RocksАй бұрын
@@malvoliosf its there 👍. Thanks for the suggestion
@rea_kr16 күн бұрын
와! 너무 재밌게 봤어요. 구독 완료하였습니다.
@JayTailor45Ай бұрын
Fascinating video. I'm really looking forward to learning more.
@mrbelkabachiАй бұрын
Amazing explanation.
@dennis_benjamin21 күн бұрын
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?
@Typed-RocksАй бұрын
@@TimaGixe Thank you, I use IntelliJ
@Caldaron23 күн бұрын
Extract does the same as the extends and doesnt need the ternary. Makes it a bit cleaner, credits go to ChatGPT ;-)
@VonCarlsson21 күн бұрын
You can also do "K in keyof T & string".
@Typed-Rocks21 күн бұрын
Interesting. Will check it out 👍
@jishnuviswanath23 күн бұрын
Nice video. First time watching you. Thank you algorithm. PS: what's the blue concentric circle with red up arrow in your editor?
@derciojds21 күн бұрын
Replying just in case someone responds
@Typed-Rocks12 күн бұрын
This points to the type where this property has its type origin. When I click on it it redirects me to the type.
@LePhenixGDАй бұрын
Amazing!
@nadavgover601720 күн бұрын
Cool! What if one of the properties Events are optional?
@Typed-Rocks12 күн бұрын
Then your on type will also be optional 👍😎
@tngerik14Ай бұрын
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
@Typed-RocksАй бұрын
@@tngerik14Thank you. I‘ve created a plugin called „WiTT“ and you can download it from the Marketplace in IntelliJ. plugins.jetbrains.com/plugin/23294-witt--typescript-type-hints-like-in-the-ts-playground For VSCode there is a plugin called „vscode-twoslash-queries“ 👍 marketplace.visualstudio.com/items?itemName=Orta.vscode-twoslash-queries
@tngerik14Ай бұрын
@@Typed-Rocks Thank you! But there is probably no way it can work within Vue's script section, right?
@Typed-RocksАй бұрын
@@tngerik14 Currently not. But I will check if I can support it. Great idea 👍
@Typed-RocksАй бұрын
@@tngerik14 Just a quick update. I've added the possibility to use it in Vue Scripts and sent it to Jetbrains for review. Will give an update as soon as it's available. Or just install the current version and get the update with vue support automatically. :)
@tngerik14Ай бұрын
@@Typed-Rocks Terrific! I looked into the repo for the vscode extension and there is an open issue to this topic too. But seems like there are some limitations and it can't be supported right now. Unfortunately I use vscode more often but your extension is even better. Less laggy, shows more characters...
@krissh_the_dev21 күн бұрын
Good video
@xyrn23Ай бұрын
nice, subbed.
@yt-sh23 күн бұрын
DRY codes are awesome
@GreggBolinger23 күн бұрын
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.
@Typed-Rocks23 күн бұрын
Thanks for your comment. How would you do it? A type is basically the same as an interface. Could you provide me an example how you would do other? I would love to get ideas 😎. This is an example similar how typescript itself shows by the way. www.typescriptlang.org/docs/handbook/2/template-literal-types.html
@davidntumba244719 күн бұрын
Maybe it depends on the context 🤔. Based on the example, it seems that events is more of a collection that has operators. Each operator has a name "add", "remove" and a action "onAdd" etc. Maybe it's best to make an operator interface that has a name and action method and then inject or instantiate that into the events type/class. Then we need not worry about the names 🤔 Cool example tho.
@DemiGoodUA13 күн бұрын
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.
@Typed-Rocks13 күн бұрын
But then we cant make our code typesafe that easy. We would need to check if every „on“ method exists and there would be no way in adding things like auto completion
@DemiGoodUA13 күн бұрын
@@Typed-Rocks You just need to maintain the OnEvents type manually. This can be a bit annoying, but your types will be simple and clear. Also, in your case, adding a move property to the Event will force you to implement an onEvent method, but you may not need that
@Typed-Rocks13 күн бұрын
If its optional then you could make the mapped typed with a „?“. For me personally I would rather have the type generated and dont have to change types everywhere when I change the basetype. But it depends on the taste :)