This TypeScript Trick Blew my Mind 

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

today i learned about template literal types: type lang = 'en' | 'de' type country = 'us' | 'gb' | 'de' type fullCode = `${lang}-${country}` and this feature you showed looks like an _upgraded_ version of the template literal types, which is going to solve several issues while writing type-safe code. thank you so much! ^^

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

I had no idea about this. Amazing. Thanks!

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

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

Eloquent solution, good job!

Thank you Josh

Josh: you are my favorite channel for coding.

i need learn more typescript, this video blow my mind

Thanks, this is going to help a lot in Advent of Typescript challenges!

this is why Typescript is programming language, not just type checker. some guy even create Add type template

This is really cool! But I've never run into a situation where I needed it. I'd use an enum for this.

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

This is the most underrated RU-vidr in the coding space… I think he is so much underrated and talented I will still say that he is underrated after he has is Gold Button because he has the best energy and enthusiasm but he has the ability to make it not just fun and easy to understand but he makes it interesting for any level… you can be intermediate and not have the impression he is going slow for the n00b and yet you can be a beginner and not be lost… I think this guy has some great skills and he knows it and he makes everyone benefit from his knowledge and he has such a positive attitude 🎉🎉🎉🎉 I would love to have my membership card of his fan club 😅😅😅😅

Woahh, that's actually a neat thing 🎉. Loved it

Great tip

This is a really cool feature

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] }

when i watch your videos my brain is blowing

A subscriber earned here

hey josh. could you make a video sharing your thoughts on stylex. anyway i love your videos ❤

someone has been doing typescript advent

// Wishing you a festive season full of joy! Massive thanks for a year packed with stellar coding content! 🎉

thats prerrty cool!

awesome 😮😮😮

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

So good

Where did you see this code?

Thanks quite useful but also This should be a short.

Advent of typescript

I have a feeling that your use case revolved around passing tailwind classes as props safely :))

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

this is the weirdest type system ive ever seen

Waiting for new advanced

Somebody played with advent of typescript

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’m confused why you added ‘number’ to type of colors

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

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

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.

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

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

At 1:14 we could've just turned the function into generic type and used keyof typeof from data passed.

will ai replace me today or tomorrow?

Josh, I'm fetching on the server with trpc but mutating on the client with react query and trpc, how to revalidate data in this case?

my brain hurts 🫨

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..

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

Or you could use enums.

The functionality you are showing (generics and infer keyword) is great, but the example you are using to do so is so bad lol.

omfg

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.

hey josh. if it's not too much trouble can you create a project with a real backend service hosted on our pc and make the API accessible publicly. like creating a real server, and there is no full project on YT so PLEASE.

What is this example lmao

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.

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

today i learned that Typescript needs to implement enums.

Cool trick but readability is horrible. If someone unfamiliar with the concept took a look at that function parameter typing he'd be like 'wut'

Typescript is a Joke and I Love it 😅.

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

FOR FUCK SAKE JUST USE A MAP

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

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TsYeBS6v4r8.htmlsi=8R2-wyjth7p4_4jj&t=239 instead of S you can use "Never" and if the syntax is not good it will throw an typescript error