In this video, we're going to start to discuss arrays in TypeScript, as usual, we'll start off with
the plain definition, then walk through some examples and then talk about why we care about these things
and when to use them.
So let's get to it first.
A quick definition.
When we work with the and typescript, we're essentially working with plain JavaScript arrays.
So we still have all the features that you are already used to.
We can push elements into an array or pop elements out.
We can map over an array right of foreach loop, use a for loop, all that kind of good stuff.
The one big difference with arrays and TypeScript is that generally we only stick elements with a very
consistent type into the array.
So for example, if we make an array that is supposed to contain strings, we will only put strings
inside there.
And if we try to put a number in or a boolean, we're going to very quickly get an error message.
So in general, when we work with the Raisen typescript, we're making use of one specific type of element
inside that array.
We can technically put different types of values inside of an array, but if we want to do so, we have
to be very explicit about it and add in a special little type annotation.
And we are going to look at a quick example of how to do that as well.
All right, so as you might guess, pretty critical to look at some code samples here.
So that's the only definition we're going to get.
Let's flip on over to our code editor and start writing out a little bit of code.
So back inside my editor, I'm going to make a new file inside of my root project directory called ARray's
Dotty's.
Then inside of here, I'm going to declare an array and just assign it to a variable, they'll say const
car makers is going to be an array of strings that have strings like Ford, Toyota and Chevy like so.
If I now hover over that array right there, you'll notice that I have an added on annotation that says
that carmakers is going to be an array of strings.
So this is type inference in action type script.
Took a look at the value inside this array right here and it said, OK, looks like those are all strings.
So I guess carmakers is always going to point at an array that only contains strings.
Now, that's type inference doing that for us automatically, remember, if we wanted to be really explicit
about this, we could always put on a clean string and then square brackets like so.
So that's a type annotation that says that this variable is always going to point at an array that contains
nothing but strings.
We will sometimes want to add in type annotations when we are working with the race, so the case in
which we would want to do that is if we initialize the array as an empty array like so.
In this case, if we did not have the annotation on here, typescript would not have enough information
to understand what type of value was going to be inside that array.
So, for example, if I now hover over carmakers, it says any array, and that means we can put any
type of value inside there.
Remember, we want to avoid the any type as much as possible.
So if we ever have to initialize an array as an empty array, we will add on our annotation.
So I'll put in a string like so.
Otherwise, if we're going to initialize our array with some contents already inside of it, then we
don't need that annotation.
All right, now, we're not limited to just putting basic values inside of a race, we can also put
complex objects inside as well.
So, for example, let's try creating a new array here called Dates.
And I'm going to be putting an array and assigning it a variety of new date object instances.
If I now hover over dates once again, it'll tell me that this is going to be an array that contains
instances of dates.
Next up, we can also write out two dimensional arrays inside of TypeScript very easily to do so.
We're just going to double up on the syntax around that annotation we put together.
So, for example, let's say we've got an array called cars by MAKE.
And I want to have like a 2D array of strings inside of here.
So inside of the first element of the outer array, I'm going to put a new array inside of here and
then I'll put in like some actual model of car made by, say, Ford.
So maybe an F one fifty.
And then at the second index, I'll put in a car by my car by Toyota, which is a Corolla.
And then finally, something by Chevy, how about a Camaro like so so if we now hover over our cars
by make once again, we'll see the type invitation for a two dimensional array in order to indicate
a two dimensional array will write out the type of value that goes inside the inner array, then one
square bracket and a second square bracket.
So that means that we're going to have an array that contains arrays of strings right there.
That's the array array of string indication right there.
Once again, we don't have to add in that annotation if we don't want to.
The only time we would is if we didn't have any contents in the array when we initialized it.
So in this case, we would write out string square brackets, square bracket like so.
Now, like I said, when we type in Arae, we're putting on a restriction on what type of value we can
put into it.
So let's have a quick pause right here.
When we come back in the next video, we'll see a very quick example of that.