This video is available to students only

Object, Array, Tuple, and Enum

In this lesson, we're going to learn how to use object types in TypeScript

Let's learn some more types#

Object types#

In the last lesson, we saw how to use primitive JavaScript data types in TypeScript. We also discussed inference in TypeScript. Now let's talk about object types. Before we start talking about object types, let me create a new TypeScript file called objects.ts. Now, let's replace the file name inside index.html with objects.js because the compiled file will be called so. Inside the objects.ts file, let's create an object, car, with brand, BMW, and price, 100000. We talked about inference in the last lesson. If we hover over the object, car, you see the object properties are inferred by TypeScript. 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. Let's try to console log car.brand; it gives us no errors because TypeScript knows that object car has a property, brand.

Now let's assign type object to the car; you see, it gives us an error. 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. If we explicitly define the data types of brand and price inside 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. In short, you can either be very specific about giving types to the object, like we're doing right now, or leave it up to Typescript's inference, which is the recommended way.

Array types#

Now, let's talk about arrays. JavaScript can have any type of the array; it can be an array of strings, an array of numbers, or an array of boolean or objects; same thing is followed in TypeScript. Let's do it below the object, and change the name of the file to other-types.ts; let's change it inside the index.html file as well.

Let's create an array of colors; red, green and blue. If we hover over it, TypeScript has inferred it that it's an array of strings. If I try to assign other values to it, let's use numbers, it will give us an error, and says, Type number is not assignable to type string. There is a shortcut though. You can explicitly tell TypeScript that it can have any type. Now the error is gone; you can put any value inside and it won't complain.

Let's remove the type for now, and let's run map function on it. Let' try to console log it; see? TypeScript knows that an array of string will yield an array. It makes things so much simpler. Again, this was just an example given using strings. You can use any data type and it will behave the same way.

Tuple types#

We have covered most important data types; strings, numbers, booleans, objects and array. If you're familiar with JavaScript, you won't face any problem understanding them. TypeScript has introduced a new data type called tuples. It's new to Javascript but other programming languages already have it, like Python. So what is a tuple? It's an array with fixed length and fixed type. For example, let fixed. It must always have length of 2, where first index must be a number and second index must be a string. TypeScript considers it as an array of type number or string for now. If you want to change the type of any index, for example, let's change the first index which is 2 from a number to a string; hello, TypeScript won't complain.

Only we know that we want an array of two elements where first index must be a number and second index must be a string. So how can we let Typescript know that? This is where tuple comes handy, so let's inform TypeScript that fixed is a tuple. Let's pass a colon followed by an array, and this time, we will pass data types inside the array unlike the array data type. Now, we can't change the first element because it must be a number. 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. If I give another value to the array, let's say boolean, it will complain again, because as per the type definition, we want an array with length of 3. Let's remove this error by adding a third type, boolean, and the error's gone. Amazing!

One more thing before we stop talking about tuples. As we saw here, giving values explicitly is caught as an error by TypeScript, but if we want to push it, let's push it. See? It doesn't give us the error. Now let's console log the fixed array. This gives us the opportunity to compile the TypeScript file to JavaScript. Let's open the terminal and type:

One more thing to tell you. Don't open both TypeScript and the compiled JavaScript file. It would complain of re-declaration. Let's close the TypeScript file, and open the other-types.js file. As you can see, there is no TypeScript here; everything is plain and simple JavaScript. Let's run the server by typing:

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. I hope tuples are clear now. Let's talk about another type.

Start a new discussion. All notification go to the author.