Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, I'll walk you through the basics of using the array and tuple types.
Resources
Note
All shortcuts mentioned in this course are for macOS operating systems. For Microsoft Windows systems, please use Control (Ctrl) instead of Command (Cmd), and use Alt instead of Option.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Welcome to the second section of
this TypeScript basics course.
0:04
In this section we're going to
focus more on types, specifically,
0:09
more on basic and utility types.
0:13
In this video, we're going to talk
about the array and tuple types.
0:16
In the last video of the previous section,
the basic types that we went through for
0:19
TypeScript match the ones for JavaScript.
0:24
But in this video, we're going to
talk about types that actually don't
0:27
match what exists in JavaScript.
0:32
And that's an array and a tuple.
0:35
Now I know it's totally possible to
write an array or a tuple in JavaScript,
0:37
but fun fact, there isn't actually
a type of them in JavaScript.
0:43
And before I continue, if you don't
know what a tuple is, don't worry.
0:48
I'll explain it in this video.
0:53
If you want to follow along, I'm going to
be using the projects folder provided in
0:55
this course, you can download it
in the download sections below.
1:00
We're going to be working from a file
called 1-basic-types-begin and
1:05
that is in the working with types folder.
1:11
I'll show you here.
1:15
I'm going to open the left file Explorer,
1:16
open the working with types folder and
open the basic-types-begin folder.
1:19
It should be empty, but you'll notice
that there is a basic-types-end folder,
1:25
which should have the final
completed code inside it.
1:30
Feel free to look at
it if you get stuck or
1:35
just want to see what we're
going to end up writing.
1:37
Let's create a file in the -begin
folder called basic-types.ts.
1:41
Now I want this file and all the files
that we're going to write for
1:48
this project to have the exact
same TypeScript configuration
1:53
as the one in a folder we created earlier.
1:58
So I'm going to get that configuration and
put it in the root of this project.
2:02
Let's open the getting started folder and
open the 3-getting-started-begin folder,
2:06
and we'll see there is
a tsconfig file here.
2:13
We're going to click on it and drag it
all the way to the bottom of this project
2:17
underneath the 4-functions-in-ts folder.
2:21
Let's actually open it up and
comment out line 72 isolated modules,
2:25
just so that we don't have to keep
creating modules in our files.
2:30
We can save by pressing command s and
close this file by pressing command w.
2:36
Now let's do the exact same thing with
our package.json file in the same folder.
2:41
We're going to click on it and
2:46
drag it all the way to the bottom
beneath our tsconfig.json.
2:48
Now it should go above the file
because all the files in this
2:53
folder are ordered alphabetically.
2:57
Let's click on that package.json file and
get rid of line 12 which is type module.
3:01
The reason we're doing this is so that
we don't have to specify es modules in
3:07
this file, because we're going to use
a plugin that will do that for us.
3:12
Let's close this file by
pressing command w and
3:17
we're going to install
a plugin called tsnode.
3:20
Now, up until this point, we've been
compiling our TypeScript code to
3:23
JavaScript, and then running our
JavaScript code separately with node js.
3:27
But with ts node,
we can run our TypeScript files directly
3:32
in the terminal without converting
it to JavaScript first.
3:36
Let's open up our terminal by going
to view and pressing terminal,
3:40
now we need to make sure we're
in the root of this project.
3:45
So I'm going to go up the folder
tree by changing directory and
3:49
pressing two periods or four stops.
3:53
We'll do that again by pressing
up on the keyboard and enter and
3:56
one more time by pressing up and
enter again.
4:00
If I press ls to list all
the files inside this directory,
4:02
we'll see that our package.json and
our tsconfig is in the root.
4:07
So we're now able to install
a package in this project.
4:12
Let's type npm install -g to
install globally and ts-node.
4:17
Hopefully, you've had no issues
with this installation and
4:25
you now should have
ts-node on your machine.
4:28
Let's close the left file
explorer as well as our terminal.
4:31
Now let's create a variable
called numbers and
4:36
we're going to give this
a type of number but
4:39
we're going to put two square brackets
after it to signify that it's an array.
4:42
On a new line, let's give this number
variable an array with numbers inside it.
4:49
And just like that, you've created
your first array in TypeScript.
4:56
This array can only have numbers,
5:01
because that is what we
specified in the type on line 1.
5:03
If we change this value 5 into a string,
we get an error,
5:06
because we can't put a string
in an array of numbers.
5:10
If we change this to a Boolean, we'll
also get an error for the same reasons.
5:14
Remember earlier when I said that
JavaScript doesn't actually have an array
5:20
type, let me prove that now.
5:24
Let's change this true back to
the number 5, and on a new line,
5:26
let's console log the type
of the numbers variable.
5:29
To run this file, we're going to open
up our terminal by going to view and
5:35
terminal, and we need to make sure
we're in the right directory.
5:39
We need to go into our project-files
first, go into 2-working-with types,
5:42
and then go into 1-basic-types-begin.
5:48
Now let's write to ts-node,
basic-types.ts.
5:53
And you'll see the console log on
line 5 is actually a type of object.
5:58
That's because JavaScript
treats arrays as objects.
6:06
So one great thing about TypeScript
is that we can check array types.
6:09
Let's also create an array of strings.
6:15
Let's comment out this line here
by pressing Command question mark
6:18
if you have VS code, and we're going to
make a new variable called strings and
6:22
give back a type of a string array.
6:27
Let's close the terminal for
now, and before I continue,
6:29
the array type can actually
be written in two ways.
6:33
It can be written in the way I've just
shown by writing the type, so number or
6:37
string with square brackets, or we can
write the array word with a capital A.
6:42
And use greater than and
6:49
less than signs to encapsulate
the type we want to be in the array.
6:51
We'll talk more about this angle bracket
sort of type later in the course, but
6:57
for now we're going to stick with
the square bracket way of writing arrays.
7:02
We can give the strings variable,
a value of an array of strings.
7:09
Again, you can't put a number in this
array because it only expects strings,
7:19
and you can't put a Boolean
in this array as well.
7:24
Let's give this a value
of three as a string and
7:30
we'll move on to talk about tuples.
7:32
Now, as you've noticed, an array only
allows you to have one type inside of it.
7:34
But let's say you wanted an array with
a mixture of types, like a number and
7:40
a string, or maybe a Boolean as well.
7:45
This is where tuples come in.
7:48
The difference between a tuple and
7:49
an array is that a tuple is like
an array that can have different types.
7:52
However, a tuple also has
a set number of items,
7:57
whereas an array can have
as many items as you want.
8:01
Let me show you what I mean.
8:06
Let's create a variable called
coord short for coordinates.
8:08
And this will have a type of number, but
it will be inside our square brackets.
8:13
We're going to give it
another type also of number.
8:20
We'll separate these types with a comma.
8:24
What this means is that
our coordinate variable is
8:28
an array that can only have
two numbers inside of it.
8:32
So if we gave our coordinate variable
a value of 0, 0, that should be fine.
8:36
But if we added one more zero,
we get a type error from TypeScript
8:43
because our type only contains two values,
number, number,
8:48
not three values of number,
number, number.
8:53
Of course, the zero can't be a string,
or it can't be a Boolean.
8:57
It has to be a number.
9:04
Let's create another
tuple with mixed types.
9:06
We're going to create
a variable called mixedTypes.
9:10
I know it's not very original, but
9:13
sometimes it's difficult to come
up with unique variable names.
9:15
And this can have a type of number,
string and Boolean.
9:21
So now this mixed type tuple contains
three values, one number, one string and
9:28
Boolean, and we have to obey this rule or
TypeScript will give us an error.
9:34
Just like this, as you can see the code
we've written on line 17 satisfies
9:44
the requirements that we set earlier.
9:49
Let's try something cool, let's change our
coordinate type above from a number,
9:53
number to a number string.
9:58
Now let's change the second
value in our coordinate variable
10:00
on line 13 to a string of 0
instead of a number of 1.
10:05
Now on line 17, let's remove the value of
1 and the string of 2 inside our array,
10:11
and let's use the spread
operator to replace those values.
10:18
This is really cool.
10:25
The types are still satisfied,
even after we use the spread operator
10:27
to open up our coordinates tuple
inside our mixed types tuple.
10:32
If we change the coordinate
type back to a number,
10:36
number instead of a number string, we
should get errors in both line 13 and 17.
10:41
Just as we expected.
10:50
Okay, we'll stop here for now and
in our next video we'll talk about
10:53
a few more basic types before
moving on to utility types.
10:57
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up