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
even more flexibility could be having a delimiter as a second param like this: type ExtractColor = T extends `${infer W1}${D}${infer Rest}` ? W1 | ExtractColor : T
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] }
Nice idea but not working. const colors = { red: { 500: 'text-red-500', }, blue: { 300: 'text-blue-300', }, } as const; type Color = keyof typeof colors; type Darkness = keyof (typeof colors)[C]; function findColor(color: P, darkness: T) { return colors[color][darkness]; } findColor('blue', 300); This will even predict/autocomplete the darkness parameter based off the color parameter.
This is the most underrated UA-camr 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 😅😅😅😅
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
It was an index of an array, from my guess. Line if you want a specific value from an array dynamically, you would have to write const foundItem = myArray[index]
You could use `text-${infer R}-${number}` or even `${string}-${infer R}-${number}`, `${'text' | 'bg'}-${infer R}-${number}`. The possibilities are endless.
He's out here sharing knowledge which benefits many, You put a comment with no value. Offer an alternative instead. Contribute something of actual value.
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 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.
I agree, currently I don't know of a great option for this. Each one has downsides: - string.split() is hacky but works for simple cases - regex is cursed and can be hard to debug - a parser combinator library is a nice option but not every project wants to add a dependency just for this
As an alternative to the extract template strings, you could write a function like fn(string input_text, ...must_match) Where args may be either strings or arrays of strings. If string args match input_text at the same character index, then continue. And if one of the strings in the array args matches the input_text starting at the same character index, also continue. But I'd rather use regex.
String manipulation in the type system? 👀 The natural progression of course is to also include lowercasing and conversion between camelCase, kebab-case, snake_case, etc. Lol. // (Not real code, btw. Lol.) type LowerCase = S extends lower`${infer R}` ? R : never // This makes no sense, but whatever. Lol. Back to work!
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 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
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.
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.
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.
Lets say I have an array of strings, array[number] would try infer all the types inside that array. In his case he was using "as const" so the types would change to immutable ones and for that reason the array[number] gives us a union of every string in the array instead of just the generic type string. type ArrayToUnion = T[number] const colors = ["black", "white"] as const; type ColorUnion = ArrayToUnion // -> 'black' | 'white' I might have missed some points because I didn't actually study that trick properly, just happened to stumble upon that when I was trying to convert a whole array into a union type
ua-cam.com/video/TsYeBS6v4r8/v-deo.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
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! ^^
that's really cool, thanks for sharing!
@@joshtriedcoding you are welcome!
this is why Typescript is programming language, not just type checker. some guy even create Add type template
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
Thanks. This is arguably less typesafe though. Depends on the context in which the color is being used.
even more flexibility could be having a delimiter as a second param like this:
type ExtractColor =
T extends `${infer W1}${D}${infer Rest}` ? W1 | ExtractColor : T
The more you know. Typescript has some amazing features. Thanks for sharing!
This is really cool! But I've never run into a situation where I needed it. I'd use an enum for this.
Josh: you are my favorite channel for coding.
Okay, this actually blew my mind, I didn't know you could do this with typescript.
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
day 1 typescript didn't have a lot of those tricks
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]
}
Nice idea but not working.
const colors = {
red: {
500: 'text-red-500',
},
blue: {
300: 'text-blue-300',
},
} as const;
type Color = keyof typeof colors;
type Darkness = keyof (typeof colors)[C];
function findColor(color: P, darkness: T) {
return colors[color][darkness];
}
findColor('blue', 300);
This will even predict/autocomplete the darkness parameter based off the color parameter.
I had no idea about this. Amazing. Thanks!
This is the most underrated UA-camr 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 😅😅😅😅
This is a really cool feature
OH. MY. GOD. IT HONESTLY BLEW MY MIND TOO.
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
Thank you Josh
when i watch your videos my brain is blowing
hey josh. could you make a video sharing your thoughts on stylex. anyway i love your videos ❤
good idea!!
Where did you see this code?
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
The point of TS is to cause as many compile time errors as possible so that less problems happen in the real world.
someone has been doing typescript advent
A subscriber earned here
Eloquent solution, good job!
At 1:14 we could've just turned the function into generic type and used keyof typeof from data passed.
I’m confused why you added ‘number’ to type of colors
It was an index of an array, from my guess.
Line if you want a specific value from an array dynamically, you would have to write
const foundItem = myArray[index]
it refers to item positions in the array
you can understand it like this , (number type is the set of all possible numbers)
so what he did is accessing the array with all possible indices
this is the weirdest type system ive ever seen
what about if its -700 or -400 ...
You could use `text-${infer R}-${number}` or even `${string}-${infer R}-${number}`, `${'text' | 'bg'}-${infer R}-${number}`. The possibilities are endless.
in his example, it should return the given string as is
Somebody played with advent of typescript
haven't had the time for it yet, sounds awesome tho
@@joshtriedcoding it is really good!
Thanks quite useful but also This should be a short.
The functionality you are showing (generics and infer keyword) is great, but the example you are using to do so is so bad lol.
Can you suggest a good example?
Particularly for infer keyword
@@suyashgulati Infer can be used in many cases in typescript. You can infer the arguments, return type, values in array/objects and much more.
It’s common knowledge that JOSH’S OPINION is WRONG and his EXAMPLES are BAD /s
He's out here sharing knowledge which benefits many,
You put a comment with no value.
Offer an alternative instead.
Contribute something of actual value.
As someone with no baseline, this example was great 👍
Advent of typescript
What is advent of typescript?
Woahh, that's actually a neat thing 🎉.
Loved it
cheers!
I love javascript! This is not possible in any other language, I wonder why
1, this is typescript, not javascript
2, many many languages have similar powerful type systems.
Thanks, this is going to help a lot in Advent of Typescript challenges!
I have a feeling that your use case revolved around passing tailwind classes as props safely :))
yep! Pretty much the same use case as in the video, and I was so glad once it worked well
Great tip
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..
Waiting for new advanced
How's the runtime performance as the list of colors grows? How's it compare to regex?
This is typescript, there is no runtime
Or you could use enums.
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.
I agree, currently I don't know of a great option for this.
Each one has downsides:
- string.split() is hacky but works for simple cases
- regex is cursed and can be hard to debug
- a parser combinator library is a nice option but not every project wants to add a dependency just for this
As an alternative to the extract template strings, you could write a function like
fn(string input_text, ...must_match)
Where args may be either strings or arrays of strings.
If string args match input_text at the same character index, then continue.
And if one of the strings in the array args matches the input_text starting at the same character index, also continue.
But I'd rather use regex.
// Wishing you a festive season full of joy! Massive thanks for a year packed with stellar coding content! 🎉
Thanks so much, happy holiday season to you too!!
thats prerrty cool!
my brain hurts 🫨
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
awesome 😮😮😮
String manipulation in the type system? 👀 The natural progression of course is to also include lowercasing and conversion between camelCase, kebab-case, snake_case, etc. Lol.
// (Not real code, btw. Lol.)
type LowerCase = S extends lower`${infer R}` ? R : never // This makes no sense, but whatever. Lol. Back to work!
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 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
Makes me really appreciate C# even more.
So good
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?
What is this example lmao
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.
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.
It's all about click bait
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'
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.
omfg
FOR FUCK SAKE JUST USE A MAP
Typescript is a Joke and I Love it 😅.
You glossed over too quickly.. .what does "[number]" explain here? Like, what/how does that work...
Lets say I have an array of strings, array[number] would try infer all the types inside that array. In his case he was using "as const" so the types would change to immutable ones and for that reason the array[number] gives us a union of every string in the array instead of just the generic type string.
type ArrayToUnion = T[number]
const colors = ["black", "white"] as const;
type ColorUnion = ArrayToUnion // -> 'black' | 'white'
I might have missed some points because I didn't actually study that trick properly, just happened to stumble upon that when I was trying to convert a whole array into a union type
Imaginary problems. Please stop messing editor speed with complex types that not solve any real problems
ua-cam.com/video/TsYeBS6v4r8/v-deo.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