Union, Literals and Custom Types
In this lesson, we're going to add lite server to our project
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:09] I hope by now you understand all the primary data types that TypeScript supports. It comes with extra features though and one of them is the Union type.
[00:10 - 00:24] First of all let's create a new file and let's call it es-features.es. So what is the Union type?
[00:25 - 00:34] In the last lesson I told you how using any type can be a bad idea. You can actually use the Union type if you are not sure about the data type of the variable.
[00:35 - 00:51] Let's create a variable called union and give it a value pipe. Let's assign the type number and let's try to change it if we can.
[00:52 - 01:01] It gives us an error. So we can use the Union type by including a pipe and add another type which is a string.
[01:02 - 01:08] You can see the error is gone. There is no limit to how many Union types you can use.
[01:09 - 01:22] Let's mutate the variable once again and this time to a Boolean. Let's add another Union Boolean to our variable using a pipe and then a data type.
[01:23 - 01:33] Again the error is gone. This is very easy to understand although it's always good to know the variable 's data type but if you're not sure you can use the Union type.
[01:34 - 01:44] I use it a lot when I know the variable will store the API request data. I can use the Union type and type define it as a promise of string or undefined .
[01:45 - 02:10] Let's say let data and I know it can be either a promise of string since I am going to make an API request and till the time there is no request made I can define it to be undefined like that because if the request fails your variable will be undefined. Now let's talk about the literal types.
[02:11 - 02:30] Usually we give data types to variables and as you know TypeScript infers the data types. Let's create a const num and give it a value 5.4.
[02:31 - 02:41] This is random. If we hover over it it has not just inferred the type number but the value 5.4 as well because it's a const.
[02:42 - 02:52] TypeScript knows that the value is never going to change so it infers the value . It's same as giving it a type of 5.4.
[02:53 - 03:02] See it doesn't complain. If it were var or let TypeScript won't infer the value but the data type.
[03:03 - 03:20] But if you explicitly define the value to a variable it will behave the exact same way. Let's make a let X to be hello and give it a type hello as well.
[03:21 - 03:36] Although it's a let but it won't let you change the value to anything else but hello. If I try to change it to some other value let's say how do you see it won't let you change it.
[03:37 - 03:51] Let's comment it out. I feel it's of no use to have a variable that can only have one value but by combining literals into unions you can express much more useful concept.
[03:52 - 04:04] For example functions that only accept a certain set of values. Let's create a function and let's call it print text.
[04:05 - 04:37] That accepts a string as the first variable and second parameter to be a literal type of either left, right or center. Let's call it alignment and it will be a literal type which will accept either left and a union type or right again or center.
[04:38 - 05:07] If we call the function by passing hello as the first variable and one of these values to be second let's say left it won't complain but if we try to use another value as a second parameter let's copy that and again let me try to pass something else as a second parameter and see the function won't accept it. This is where literal types come handy.
[05:08 - 05:17] By the way I have taken the example from the TypeScript's official documentation you can also check it out in the description. Let's comment it out.
[05:18 - 05:27] Now let's talk briefly about custom types or also known as type aliases. They are just variables which store types.
[05:28 - 05:42] You can store the type number, type string, type pullon or union types or even literal types inside them. For example you have many variables which use the same union type or same literal type.
[05:43 - 05:50] Following the principle rather than repeating them you can store them inside the type variables. And use them anywhere you want to.
[05:51 - 06:01] Let's make one type variable and call it dynamic. This type can either be a number or a string.
[06:02 - 06:17] Let's make a const with name static and give it a custom type dynamic. If you give it a value of a number or a string let's say pi it won't complain.
[06:18 - 06:30] But if you give it a Boolean value let's say true it won't accept it. And it says type pullon is not assignable to type dynamic.
[06:31 - 06:36] I'm telling you again that it accepts both data types and literal types. I hope you understand the concept.
[06:37 - 06:39] Now let's move on to the next lecture. Thank you.
[06:40 - 06:41] Thank you. Bye.
[06:42 - 06:43] Bye. Bye.