No BS TS #14 - Mapped Types in Typescript

[@ppassa1]

[Property in keyof Type as `on${Capitalize}Change'] This is too good to use in production codes haha

[@chookingvid]

I have never seen anyone get so excited about Typescript before.

[@Deliverant]

Typescipt is so great. I can't return to regular javascipt and i don't even know how i lived before learning it

[@360nickx]

I love Jacks excitement, haha totally makes it worth watching on loop this!

[@dan_le_brown]

Ngl, this is the craziest thing i have seen in typescript yet 🤯

[@pierluigiomargiancola7388]

Hi Jack, I've been following your channel from a lot time. sometimes I don't exactly remember how to implement one thing that I learned from you and go back to the video I learned from. So yeah, just wanna thank you and tell you that you have improve a lot the quality of every videos and also your presence in front of the camera is top, Thank you, have a nice day

[@Kwuasimoto]

Jack you're a beast man, every time I have questions regarding typescript you come in like a super hero lmao

[@BHFJohnny]

Ok, still in the 'I knew this exists' realm, but it's getting way more interesting. Cool cool.

[@101stDay]

Jack's enthusiasm is SO infectious lol. TS is 🔥and this series is 🔥🔥🔥

[@supergoteam]

9 times out of 10 I just appreciate your video's and delivery. Then on that 10th time you learn something very cool.

[@franciscoplaza7078]

Wow! This is a master class in 9 minutes. congrats

[@alisonhj]

The best one of this serie I've seen so far! Really really cool!

[@jornejongsma]

Ahhghr, cool-cool-cool, but I'm so afraid that I will forget this ! This subject really deservers a challenge!

[@jherr]

Ask, and ye shall receive. Tomorrow. :)

[@jornejongsma]

@@jherr Awesome! :)

[@victorlongon]

Wow, that is something I didn't have a clue about! Nice one again, Jack!

[@hossammohamed5794]

Jack, You're doing amazing as usual. I know that you were writing the code the way you were because you are trying to teach but here is a dynamic name and type typing for the listenToObject function type Listeners = { [key in keyof L]: L[key]; } function listenToObject( listeners: Listeners): void { throw "Needs to be implemented"; } listenToObject({ onNameChange: (v: string) => {}, onAgeChange: (v: number) => {} })

[@jherr]

Nice! Thank you!

[@released4pleasure]

Good addition, this makes the code a lot more readable and easier to understand.

[@jean-baptisteberthet8239]

What an incredible video! Typescript is so cool, I can't wait to dig deeper with No BS TS series. Thank you sir 🙏

[@andrewlee7574]

I don't quite understand why intersecting string and Property will resolve the issue at 7:48

[@anonymoussloth6687]

I didn't understand what you did at 7:40. Can you elaborate why doing string & Property was necessary?

[@steven7936]

Last month they added react hooks for forms in typescript. Would love to see a video on that!

[@jherr]

Which forms library?

[@steven7936]

@@jherr import { useForm } from "react-hook-form" The library is from the React Hook Form V7

[@jherr]

@@steven7936 Definitely going to cover that. I did a video on `react-hook-form` last year. But I need a referesh.

[@francis_n]

@@jherr wow good to know that. We've just started using react-hook-format my work place. Will scout that video and await the next one. react-hook-form is sooo cool

[@Brunoenribeiro]

watched the whole playlist and every single video was a mindblow. Please keep them coming!

[@jrs_devs]

OMG! 6:52 This is witchcraft, I thought that I'd never use it but that is awesome! 😍😍

[@1Malak16]

Wow. Thank was really cool! Thanks!

[@avneet12284]

OMG ! That's mindblowing !

[@jora5483]

gosshhh.. that's unreal!

[@okerror1451]

Your videos are really good! Hope you keep going!

[@KangJangkrik]

It's 2022 now, and you can change this [key: string]: string | number To Record

[@hanasatoshi2741]

Awesome video. Thank you so much!

[@mgcmsn]

Pure gold!

[@norfeldt4183]

Can this be used to reverse lookup a Enum of numbers like `enum DetailedErrorCode { MEDIA_UNKNOWN = 100, MEDIA_ABORTED = 101, }` (Can't seem to get my head around it)

[@herbertpimentel]

OMG 🤯 thanks I was looking for that . NOBS♥️

[@SarahAbdulsalam-l9l]

love the energy :)

[@diegogranados4668]

Jack: Super cool! Me: I didn't understand anything🥴

[@lukemoralesTV]

What if you wanted to make those properties optional based on whether the original property is optional or not? Let’s say “age” was optional and “name” was required, how would you make “onNameChange” required and “onAgeChange” optional in that mapped type?

[@jherr]

That's a really good question. I actually don't know right off.

[@lukemoralesTV]

​@@jherr that's something I've been struggling to find an answer. I've been using this mapped types concept to generate TransientProps for styled components (transient props are props that start with $, i.e: $active, that are not passed down to the DOM). So I would have a type that's something like: const ContainerProps = TransientProps and that generates: { $active: boolean } but with that approach, all properties would be required and I cannot use optional properties when generating them =/

[@rajatpratapsingh3123]

good one

[@TheInimicus]

This video is really good stuff!

[@mmahgoub]

This is so awesome! The BS is what I am doing now 😂

[@sam-zy2dn]

Why should we use and we could not use ?

[@PiyushChauhan2011]

Great video. I was wondering if there is any way to share types between backend and frontend without importing extra compiled code from backend into frontend, just only types? Would be great to learn about it

[@jherr]

I'll talk more about sharing types between node modules (which would include both front and backend) in an upcoming video. :)

[@carminetambascia6355]

@@jherr which video talk about that topic?

[@jherr]

@@carminetambascia6355 Here is one: kzbin.info/www/bejne/hJjOintvbL9mpM0

[@emdadgar_official]

typescript is awesome ... i wish i could write ypescript by Golang/rust's performance . instead of being dependet of v8

[@recognizeHeaven]

Привет Насколько сильно то, что написал Джек усложняет или упрощает жизнь?

[@ShaggyKris]

So I was trying to create a type for a UniqueArray that would only accept unique values in the array. I found a Stack Overflow post showing a way to do this for a variable, but I was not successful in making it work for a function argument. Any ideas on how this could be achieved?

[@jherr]

Why not use a Set? That's built in and it only accepts unique values.

[@ShaggyKris]

@@jherr By typing as a set, will it display an error if you have duplicate values passed? Essentially trying to type a function to show any devs passing arguments that they may have doubled up on something

[@jherr]

@@ShaggyKris You didn't mention displaying an error as a requirement. Set is just another data structure core object type in Javascript that only accepts unique values.

[@ShaggyKris]

So the idea would be to have an argument `page_type?: string | string[]`, but if passed duplicate values (say `page_type: ["static", "*", "*"],` ), it would highlight the error. Ultimately, it's a trivial thing to need implemented, but I'm curious as a thought experiment after seeing the Stack Overflow post (stackoverflow.com/a/64519702)

[@jherr]

@@ShaggyKris I wasn't able to get that stack overflow code to work at all. Interesting thought experiment. Enjoy!

[@925082]

Magic

[@mainendra]

I’m loving it 😍

[@berkaygurcan141]

The explanation and examples are very nice, but I don't think I can write this on my own :D. I guess this is normal

[@jherr]

This is a complex feature of TypeScript to be sure.

[@kamilwitkowski2521]

Nice

[@d4rkd3v1l85]

sorry i am a bit confused over this. sounds a little of "overengineering" things here, but anyway how can we handle those listeners in practice?

[@jherr]

In this case we are making sure that the listeners are properly typed. To actually implement the listeners I'd use a JavaScript Proxy.

[@illya_ike]

Every time a programming language gives you flexibility - somebody will use it to create hard to read code :) Then another language will be created that will throw away all the complex syntax because people are tired to read this super confusing code - this is how C++ was simplified to Java :) I think this stuff is good for rare occasions, but we should try to avoid it if possible.

[@jherr]

It's more for library authors.

[@illya_ike]

@@jherr agree

[@imamansoni]

Crazy thing 😮

[@jeffreysegovia7656]

So cool! ☺

[@cyrusgracias4556]

I feel this is just making code more complex unnecessarily

[@jherr]

Well, this Mapped Types feature in particular is pretty obscure stuff. :)

[@ChillAutos]

Na it simplifies it. I ran intonsoen pretty complex mapped types the other day, and it took the whole morning to work out exactly how to achieve what I needed but once I did, we had proper types with auto completion and nonduplicated code. The kinda gnarly code to made it can now be hid away and the user can just use a simple function to generate the new objects.

[@cbunn81]

MyFlexibleDog makes me think of Slinky from Toy Story.

[@elmalleable]

insane

[@AtulVinayakS]

type and interface is being used mixed up.. this is confusing

[@salaheddinemadih5617]

Nice courses, for additional listeners I tried this [Property in keyof Type as `on${Event}${Capitalize}`]?: () => void; enum Event { Add = 'Add', Change = 'Change', Update = 'Update', Delete = 'Delete', }