TypeScript Wizardry: Recursive Template Literals

au, my brain!

Wow, that's crazy :D didn't know that was possible!

I was casually watching this in the living room and was really excited because it's just extraordinarily good content. But as soon as I was done I turned around to see my girl friend judging me. She called me a nerd and now I am happy in two ways. :>

Thank you for sharing this and "yolo"

Legendary

I have though about this many times and though it was impossible in TS.
Now you've clear my mind.
Thank you!

Great video!

My version for this case would be
type PathTo<T extends Record<string, unknown>> = keyof {

[K in keyof T as T[K] extends Record<string, unknown>
? `${K & string}.${PathTo<T[K]> & string}`
: K & string]: any;
};

This is amazing black magic and I’m glad I watched the video.

If I ever saw anyone submit anything remotely similar to this in a PR it would get a Deny so fast my left click would break the sound barrier.

very educational video 👍 would be great to see more videos about complex types in TS and you find a solution for them

Wow great stuff. You've just gained a new subscriber :).
I've been getting more and more into Typescript and I often struggle with recursion. I think the "variables" name in types aren't always the best :) things like K and T aren't very descriptive and it makes it really hard to understand what is going on :). I think one nice thing would be to comment the most challenging parts so you know what is going on.
But I loved your process though, thank you very much the great video.

Man, that's rough! LOL It's an elegant solution but it's not very legible. It seems like once we get to the level of complexity where we need to invoke the term "type-level programming" that Typescript's terse syntax doesn't always let you express things in a way that's suitable for maintainability. You see the same kind of shortcomings with complex regular expressions. It starts to feel like you would almost want an extended syntax to deal with that sort of thing. Some languages actually do have alternative ways to build regexes that are more verbose but easier to read. Maybe MS will do something similar for Typescript in the future.

_.get()

Awesome 👌👏👏👏👏👏👏👏👏

Can we also program the object?

Why do you need to do ": keyof. { [K in EXP]: any } "instead of ": EXP"?

This is my issue with TypeScript tutorials, there are only two skill levels being taught: Absolute Beginner or Dark Wizard.

Man, very good, thanks for sharing! With the TS one actually have a huge boilerplate even before actually start coding - but it is definitely worth of that!

i see it right on the next day after doing exactly the same :)

been playing around with something similar, ended up with


type DotNotation<T> = {
[K in keyof T]: T[K] extends object
? `${K & string}.${DotNotation<T[K]>}`
: K & string;
}[keyof T];


type Foo = DotNotation<typeof my_obj>

How would you also allow "hello.greetings" for instance ? (stop the type mid-path)

It can sometimes be useful, although this is not the case in your example obviously.

Anyways, great explanation, thank you for that !

Imagine geting hired somewhere and your first task is to debug this while Simon is no longer working there

This was a very interesting video. I really enjoyed it

TS was a mistake

so lame lol. TS at this level takes the joy and fun out of literally everything

No repository link? Not good.

But excellent video

Damn dude. That big brain move of intersecting string with the T[K] blew my mind. This video is going straight to my favorites playlist. You got a sub from me.

"T[K]" I'm sure people will try to backtrack a lot to understand this. It's still a pain in the ass 🤣🤣

Could perhaps ‘infer K’ be used instead of ‘& string’ to Get the types correctly and also provide some fallback?

Great video! Thanks!

This is a great example for why not to use Typescript. What exactly does the baby-sitting code accomplish? Imagine the amounts of time wasted writing, reading, and maintaining shit like this. Write plain JS and use tests to assert code quality.

another reason i detest typescript...

Thanks for the video. Trying do something lake this without using recursive type… this solution cooler!

That is a very nice explanation. Would it be possible to make the t function more strict on the return type? so that instead of just returning a string it returns a string litteral? so that when you add the key the complier already knows what the sting is and shows that on hover.

I know this is mainly a demonstration of advanced TS features, and it also helps when having to write type declarations for existing libraries. And sometimes it's the kind of API you want to have.

But for new code, personally I would think about keeping it simple and just use e.g. t().greetings.morning instead of t("greetings morning"), where t = l => locales[l] (which is even one character shorter).

This way no recursion is required and you get the same autocomplete suggestions. And you'll also get the exact type at given key for free, which somebody in the comments suggested could be used parameters etc.

Piece of art for a new TS user.

Very cool! React-hook-form I believe uses exactly this syntax to access form data but i do not know how they made the typing work. Perhaps worth the look? I know I will now!

Useless

Didn't know you could put string literals to generate keys! I was always wondering, how react solved "data-xyz" props. I was looking into its types, but couldn't find it there.. now I know it is some version of this!

This is honestly really cool. I just wish TypeScript wasn't JavaScript, because in the end you can just throw anything into whatever TypeScript function is created and watch it break. I know many who struggle with TypeScript due to IDE performance as well, which is unfortunate. More of an IDE problem though (and likely relying too much on inference).

That was awesome!

Whoa, didn't know this was possible, great job explaining it! :D

Would be much easier to use a recursive function to generate those strings. If you add an extra level, you need to change all your code...

Ah, excellent! When I came upon this problem years ago, this was not possible yet in Typescript. I had to solve the problem in a more janky way. But this is so simple and sensible now, I can rewrite it nicely, thank you

Thanks buddy 😮, this got me;
Still getting my feet wet with Typescript 😊

Do you have any stats on what these "fancy types" do to build times?

This is fantastic. Keep it up!

Great video, localws are always a pain and I've had this issue in the past. Very elegant solution

This was great!
But please share the code so I dont have to image-to-text it.