React TypeScript Tutorial – 21 – Template Literals and Exclude
- January 10, 2024
- Posted by: MainInstructor
- Category: React
Video Title: React TypeScript Tutorial – 21 – Template Literals and Exclude
In this video let’s take a look at template literal types which is built on string literal types we have seen earlier in the series in one of the very first videos we learned about string literal types where we used loading success and error as a type for status
As it turns out we can carry this over to template literals to create many strings by making use of unions and if that didn’t make sense don’t worry as it will be much clearer by the end of this video for this example i have created another folder called template literals
Within the folder i’ve created a new file called toast.tsx it is supposed to be a toast notification component not the full implementation of course for our scenario it is a simple component that accepts one prop called position and renders it in the browser if you look at a library like react hot
Toast for example a toast notification can pop up in various positions on the screen top left top right bottom left bottom center and so on and that is what we want to restrict our position prop value to as well i’ve left a comment here that position can be 1 of
Left center left top left bottom center center top center bottom right center right top and finally right bottom let’s learn how to type this position prop now the first option is to simply hard code every single position and that would work but i want to take a different approach
And introduce you to the template literal way of doing this it is really useful when you have to combine values to create a whole new value so definitely something to have in your toolkit we begin by defining the horizontal and vertical position types first type horizontal position and this can be either left
Or center or right similarly type vertical position can either be top or center or bottom this is pretty straightforward to understand now though we can use template literals to combine horizontal position and vertical position let’s begin by creating a new type for the toast component so type toast props
Is an object with one prop called position the value for this type will be a template literal so backticks we then specify dollar curly braces horizontal position hyphen dollar curly braces vertical position if i now hover on the position property you can see typescript has inferred all
Possible combinations to be the value of position type and this if you ask me is really cool we can now specify the same on line 14 so this is of type toast props and in amp.tsx if we now try to invoke the component with position autocomplete gives us the valid combinations
If we fill in a random value that is not created by the template literal typescript throws an error if i change it back to left center the error is gone typescript is happy once again but we do have a small problem position can also be center center
I would much rather prefer if it is just center which brings us to another feature in typescript which is the exclude keyword for the position prop we can specify exclude and then angle brackets the first argument within angle brackets would be our template literal followed by a comma
And then we specify the type we want to exclude that is center center now we still need to allow just center though so we can make use of unions again so exclude closing angle bracket or the string center when i format it typescript adds a pipe character at the beginning of exclude as
Well so you don’t really have to worry about it now back in app.tsx you can see we have an error for center center if i just specify one center typescript is happy again now i know nine string literals are hardly a use case to use template literals and make
It more complex than it has to be however i simply wanted to introduce you to this concept so that you can make use of it in your own project if you ever come across such a requirement but this pretty much is about template literal types thank you for watching and i’ll see you
In the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Use coupon code CodevolutionYoutube for 100% off lifetime discount to your subscription at https://www.taskade.com/billing
Very nicely explained, easy to understand, and straight to the point, thanks so much!
typescript is happy again, I'm happy also.
i am getting errors
This can be done with Omit?
This was a pretty cool solution, loads of use cases…
GoodJob!
the most thanks for you brother
This video was a life saver for me today! Thanks a lot sir.
I can confidently say that your channel is the best for React tutorials. Keep up the great work 😀
very handy
いつもわかりやすい動画をありがとうございます!
Thanks!
The way you describe its Awesome++
Exclude feature was mind blowing 👏