Object, Array, Tuple, and Enum

[00:00 - 00:07] In the last lesson, we saw how to use primitive JavaScript data types in Type Script. We also discussed inference.

[00:08 - 00:17] Now, let's talk about the object types. Before we start talking about the object types, let me create a new TypeScript file called objects.js.

[00:18 - 00:33] Let's replace the file name inside index.html to object.js. Because the compile file will be called so.

[00:34 - 00:51] Now, inside the objects.ts file, let's create a new object called car. With brand pmw and price to be 100,000.

[00:52 - 01:04] We talked about inference in the last lecture. If we hover over the object car, you see the object properties are inferred by TypeScript.

[01:05 - 01:15] It knows the brand is of type string and price is of type number. When TypeScript infers, there is no need to explicitly assign a data type.

[01:16 - 01:29] Let's console.log car.brand. It gives us no errors because TypeScript knows that object car has a property brand.

[01:30 - 01:39] Now, let's assign type object to the car. You see, it gives us an error.

[01:40 - 01:54] TypeScript knows that car is an object, but it doesn't know about its properties. By the way, you can use either keyword object or curly brackets to give it an object type.

[01:55 - 02:25] If we explicitly define the data types of brand and price inside the curly brackets, and if we hover over it again, it shows us the exact same message as before. Also, if we try to console.log a property TypeScript doesn't know about, let's say model, it will give us an error again.

[02:26 - 02:44] In short, you can either be very specific about giving types to the object, like we are doing right now, or leave it up to TypeScript's inference, which is the recommended way. I will now take that off.

[02:45 - 02:51] Now, let's talk about arrays. JavaScript can have any type of array.

[02:52 - 03:00] It can be array of strings, array of numbers, an array of Boolean or objects. Same thing is followed in TypeScript.

[03:01 - 03:17] Let's do it below the object. Since we are mentioning arrays here, let's change the name to other types.

[03:18 - 03:48] Let's change it inside the index.html file as well. Let's create an array of colors and inside red, green and blue.

[03:49 - 04:03] Now, if we hover over it, TypeScript has inferred it that it's an array of strings. If I try to assign another values to it, let's use numbers.

[04:04 - 04:11] It will give us an error and says, Type number is not assignable to TypeScript. There is a shortcut though.

[04:12 - 04:20] You can explicitly tell TypeScript that it can have any type, like this. Now, the error is gone.

[04:21 - 04:26] You can put any value inside and it won't complain. Let's remove the type for now.

[04:27 - 04:43] And let's run the map function on it. Let's try to console, log it.

[04:44 - 04:53] TypeScript knows that it's an array of string and it will yield an array. It makes things so much simpler.

[04:54 - 05:01] Again, this was just an example given by using strings. You can use any data type and it will behave the same way.

[05:02 - 05:08] We have covered the most important data types. Strings, numbers, bouillands, objects and array.

[05:09 - 05:17] If you are familiar with JavaScript, you won't face any problem understanding them. TypeScript has introduced a new data type called tuples.

[05:18 - 05:28] It's new to JavaScript, but other programming languages already have it, like Python. So, what is a tuple?

[05:29 - 05:41] It's an array with fixed length and fixed type. For example, let fixed.

[05:42 - 05:52] It must always have length of 2, where first index must be a number. And the second index must be a string.

[05:53 - 06:12] TypeScript considers it as an array of type number or a string for now. If you want to change the type of any index, for example, let's change the first index, which is 2, to a string called hello.

[06:13 - 06:22] TypeScript won't complain. If we know that we want an array of 2 elements, where first index must be a number and second index must be a string.

[06:23 - 06:27] So, how can we let TypeScript know that? This is where tuple comes handy.

[06:28 - 06:36] Let's inform TypeScript that fixed is a tuple. Let's pass a colon and an array.

[06:37 - 06:52] This time we will pass the data types inside the array, unlike the array data type. Now, we can't change the first element, because it must be a number.

[06:53 - 07:04] If we change it to a number, TypeScript will stop complaining. Like I told you before, tuple means fixed length of array with fixed type.

[07:05 - 07:29] If I give another value to the array, let's say boolean, it will be a number. It will complain again, because as per the type definition, we want an array with length 3, let's remove this error by adding third type boolean, and the error is gone.

[07:30 - 07:34] Amazing. One more thing before we stop talking about tuples.

[07:35 - 07:43] As we saw here, giving values explicitly is caught as an error by TypeScript. But, what if we want to push it?

[07:44 - 07:56] Let's push it. It doesn't give us the error.

[07:57 - 08:07] Now, let's console.log the fixed array. Make sure the server is running.

[08:08 - 08:18] Also, this gives us the opportunity to compile the TypeScript file to JavaScript. Let's open the terminal in Type TSC, other types.ts.

[08:19 - 08:33] One more thing to tell you, don't open both TypeScript and compiled JavaScript file. It complains us of redecloration.

[08:34 - 08:41] Let's close the TypeScript file and open the other types.js file. As you see, there is no TypeScript here.

[08:42 - 08:48] Everything is plain and simple JavaScript. Go ahead and run the server by typing npm start.

[08:49 - 08:59] If we open the console and see our array, it has four elements. Besides declaring it as a tuple, this is because tuple supports push method.

[09:00 - 09:04] I hope tuples are now clear. Now, let's talk about another type.

[09:05 - 09:11] Enum is a known type in a lot of programming languages. JavaScript doesn't know about it.

[09:12 - 09:25] Enums are nothing but a set of values and are one of the few features Type Script has, which is not a type-level extension of JavaScript. Enums allow us to define a set of named constants.

[09:26 - 09:34] Using enums can make it easier to create a set of testing cases. TypeScript provides both numeric and string-based enums.

[09:35 - 09:41] Let's look at the numeric enums first. Numeric enums are nothing but enums which have a numeric value.

[09:42 - 09:48] An enum can be defined using the enum keyword. Let's create an enum.

[09:49 - 10:01] 1 = 1 and then let's not give any value. 50 and 4.

[10:02 - 10:10] Here we have a numeric enum where one is initialized with one. All of the following members are auto-incremented from that point on.

[10:11 - 10:18] In other words, number one has value one. 2 has 2, 3 has value three and 4 has 4.

[10:19 - 10:28] If you have given an explicit value which is not part of the sequence, let's say value 100 to 3. It's fine as well.

[10:29 - 10:36] Also it's a convention to give up-a-case values while writing enums. Right now we have numbers so we don't need it.

[10:37 - 10:43] And if you don't want to start with a particular number, you can just keep it like that. Don't give any value.

[10:44 - 10:55] And let's go and get out. Here one would have to value zero, two will have one and so on.

[10:56 - 11:08] This auto-incrementing behavior is useful for cases where we might not care about the member values themselves. But do care that each value is distinct from other values in the same enum.

[11:09 - 11:17] Now let's talk about the string enums. String enums behave the same way.

[11:18 - 11:25] The only change is the value which is now a string. In the enum numbers we had values as numbers.

[11:26 - 11:37] But in case of string enums, we have values as enums as well. Let's copy one enum here and this is called enum direction.

[11:38 - 11:47] Up has the value of string up, down has the value of string down. And as I said, it's a convention to use the values to be uppercase which we have done right now.

[11:48 - 11:52] Let's do one thing. Let's console log the values.

[11:53 - 12:07] Let's first console log numbers dot one. And after that let's console log directions, direction dot up.

[12:08 - 12:14] Alright. Although our server is running, we haven't compiled the new code to JavaScript.

[12:15 - 12:25] So let's do that. Open the new terminal, PFC, other types dot P.S.

[12:26 - 12:38] Open the console. Now see the value of numbers dot one is zero because we did not give any value so it starts from zero.

[12:39 - 12:51] Direction dot up gives us the value up. Just as we mentioned, purpose of enums is not assign an extra type but to be extra careful while assigning a value to a variable.

[12:52 - 12:59] For example, the value right is to be used in more than one file. There is always chance of spelling errors, right?

[13:00 - 13:06] So enum types reduces that risk. This basically asks TypeScript to stop checking the data type.

[13:07 - 13:13] When you assign any type to a variable, it's like a JavaScript variable. You can change the data anytime you want.

[13:14 - 13:22] Let's create a data variable and give it a value, five. Let's give it a type of any.

[13:23 - 13:32] Let's now change it to an array. It won't complain.

[13:33 - 13:41] This basically blocks the purpose of using TypeScript because it won't let you check the data type. Avoid using it as much as you can.

[13:42 - 13:49] I hope this makes sense. We saw the object type, array type, pupil type, enums and any type in this lesson.

[13:50 - 13:52] Let's learn more in the next one.