This TypeScript Trick Blew my Mind
Вставка
- Опубліковано 13 гру 2023
- I just love learning stuff like this. Super handy for these use-cases and these just make your app that much nicer to develop. Really hope you enjoy it as much as I do!!
Maybe the best tech newsletter???: www.joshtriedcoding.com/
-- my links
Discord: / discord
GitHub: github.com/joschan21 - Наука та технологія
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!
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
I had no idea about this. Amazing. Thanks!
The more you know. Typescript has some amazing features. Thanks for sharing!
Josh: you are my favorite channel for coding.
Thank you Josh
Okay, this actually blew my mind, I didn't know you could do this with typescript.
Eloquent solution, good job!
Woahh, that's actually a neat thing 🎉.
Loved it
cheers!
i need learn more typescript, this video blow my mind
Thanks, this is going to help a lot in Advent of Typescript challenges!
A subscriber earned here
Great tip
when i watch your videos my brain is blowing
This is a really cool feature
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 😅😅😅😅
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
thats prerrty cool!
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
This is really cool! But I've never run into a situation where I needed it. I'd use an enum for this.
Where did you see this code?
this is why Typescript is programming language, not just type checker. some guy even create Add type template
awesome 😮😮😮
hey josh. could you make a video sharing your thoughts on stylex. anyway i love your videos ❤
good idea!!
OH. MY. GOD. IT HONESTLY BLEW MY MIND TOO.
// 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!!
So good
someone has been doing typescript advent
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.
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!!!
Thanks quite useful but also This should be a short.
Advent of typescript
What is advent of typescript?
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
this is the weirdest type system ive ever seen
Waiting for new advanced
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.
How's the runtime performance as the list of colors grows? How's it compare to regex?
This is typescript, there is no runtime
my brain hurts 🫨
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.
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
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.
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!
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?
Or you could use enums.
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
At 1:14 we could've just turned the function into generic type and used keyof typeof from data passed.
omfg
will ai replace me today or tomorrow?
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 👍
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
Makes me really appreciate C# even more.
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.
What is this example lmao
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.
today i learned that Typescript needs to implement enums.
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
Typescript is a Joke and I Love it 😅.
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'
FOR FUCK SAKE JUST USE A MAP
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