This TypeScript Trick Blew my Mind

Yo dog I heard you liked types in your scripts, so I put scripts in your types so you can script your types while you type your scripts

The more you know. Typescript has some amazing features. Thanks for sharing!

A subscriber earned here

Thanks quite useful but also This should be a short.

OH. MY. GOD. IT HONESTLY BLEW MY MIND TOO.

introducing this to my typescript brain is like adding letters to math in 5th grade

I love javascript! This is not possible in any other language, I wonder why

Where did you see this code?

Or you could use enums.

omfg

Having used TypeScript from day 1 of its release and considering myself an "advanced" user, I still found myself with multiple mind-blown moments watching this

Why not use an object as a map and get more flexibility?

Const colors = {
red: {
500: “text-red-500”,
400: “text-red-400”
}
} as const

Type Color = colors[string]
Type Darkness = colors[string][number]

Function findColor(color: Color, darkness: Darkness) {
return colors[color][darkness]
}

awesome 😮😮😮

Okay, this actually blew my mind, I didn't know you could do this with typescript.

This is a really cool feature

To add some more flexibility, you could infer like this `${string}-${infer R}-${string}`. that way any dashed dashed styled string would extract the color

Hahaha so this can cause dev/compile time errors when matching on a dynamic source and that source changes? Awesome, I'm absolutely going to annoy my colleagues with that :D

How's the runtime performance as the list of colors grows? How's it compare to regex?

Imaginary problems. Please stop messing editor speed with complex types that not solve any real problems

Great tip

FOR FUCK SAKE JUST USE A MAP

this is the weirdest type system ive ever seen

today i learned that Typescript needs to implement enums.

So good

Nice to know about the wizardry.... but for everyone seeing this, never, ever put that on professional code base...

Typescript is creating more issues than it is solving.

Code is not meant to be fun, its about maintanability..

Isn't that easy in javascript. Throw error if string is not in array.

Fun and neat trick, but this is some typescript acrobatics. I would question how sensible it is to do this in a professional environment, with others who might have to work with this code.

when i watch your videos my brain is blowing

Josh: you are my favorite channel for coding.

I wonder what's the problem with TS design/documentation that even more seasoned developers from time to time just "find out" new things about it. It's a trend that I haven't seen in other languages/libraries nearly as often as in TS.

Though it depends on what you want to achieve, but in this case I think it makes more sense to have 'never' on the right hand side of the ternary:

type ExtractColors<S extends string> = S extends `text-${infer R}-500` ? R: never

This way it really 'extracts' color names from strings that follow the specified format, in your version it would include any malformed string as is

Thank you Josh

my brain hurts 🫨

what about if its -700 or -400 ...

hi thanks for this video. i have one question why don't we use redux with nextjs. i have never seen a tutorial which uses nextjs with redux can you explain to me this thanks!!!

I really wish this was as easy in actual code not in typescript.
For this you'd basically need to text.split("-")[1], but for more complicated things the only way is writing regex with custom named capture groups, and then destructuring that. But then typescript complains that the match could be null or some groups could not get matched, and for numbers you need to parse them manually later, it's a huge mess.

basically, give me reverse string literals where you just go text.extract(`text-${const color}-500`); and you get color out (or undefined/null/empty string if it didn't match). Trademark pending.

Typescript is a Joke and I Love it 😅.

I had no idea about this. Amazing. Thanks!

Waiting for new advanced

Omg this just save me. I having been going in circles trying to figure out how to extract and validate string values in nextjs search params

i need learn more typescript, this video blow my mind

I think this is already too much. TypeScript is inspired by C# to make the work more robust yet agile. And this is already too much... it doesn't make sense

What is this example lmao

I’m confused why you added ‘number’ to type of colors

You glossed over too quickly.. .what does "[number]" explain here? Like, what/how does that work...

will ai replace me today or tomorrow?

Eloquent solution, good job!