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#
objects.ts. Now, let's replace the file name inside
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.
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.
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!
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.