This course will be retired on April 12, 2021.
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
You can write an Angular application in either JavaScript or TypeScript. In this course we'll be using TypeScript. TypeScript provides a lot of extra features not found in JavaScript. In this video we'll look at how it helps when developing an Angular application.
Angular is the first major front-end
framework to incorporate TypeScript.
0:00
While you may enjoy the flexibility
of a dynamically-typed
0:05
language such as JavaScript, you're
likely to have experienced moments where
0:08
third-party libraries didn't
work as documented and
0:12
maybe that's because you passed in
the wrong values into a method call.
0:16
This is precisely why Angular
is built on TypeScript.
0:19
The documentation is right there at
your fingertips when you're developing,
0:23
keeping you in the editor.
0:27
TypeScript is a type
superset of JavaScript and
0:29
it has all the same features and
syntax of JavaScript so that you
0:33
don't need to learn something new but it
includes static typing for added safety.
0:36
In addition, TypeScript allows you to
write in ECMAScript 2015 syntax and
0:42
have it transpiled to all the versions of
the language for greater browser support.
0:47
If we head over to typescriptlang.org and
click on the Playground button,
0:52
we can write some TypeScript and
compare it with transpiled JavaScript.
0:58
Let's go ahead and
write a Greeter class with a greet method.
1:04
The greet method takes
a single parameter name.
1:11
Let's log out this name with console.log.
1:16
Hi, name.
1:25
Finally, let's create
an instance of the greeter.
1:30
And then,
call the greet method With the string Jim.
1:38
This is a valid JavaScript class and
there's nothing here that's specific
1:52
to TypeScript, yet,
it's also valid TypeScript.
1:56
Because I didn't provide any
types to the greet method,
2:00
I can't be certain that the value
passed in will be a string.
2:03
I'd like to enforce that rule so
that function works as expected.
2:08
If I add a bit of metadata
to the function's signature,
2:12
I can prevent the caller from
passing in a number or the type.
2:16
If I change Jim to 5,
2:22
We'll see an indicator telling us
that there's a problem with our code.
2:26
If I hover over the code,
I'll see what the problem is.
2:30
That the argument name cannot be
a number but it has to be a string.
2:34
This is the Typescript language service,
2:38
interpreting our code at design time not
when our application runs, pretty neat.
2:41
TypeScript is baked into
every Angular application.
2:45
And provided you're using an editor
that supports TypeScript,
2:49
you can reap the benefits of intelligent
warnings and error detection.
2:53
We'll be using Visual Studio Code
going forward.
2:57
Visual Studio Code supports
TypeScript out of the box,
3:01
you can download it at
code.visualstudio.com.
3:05
If an Angular API changes
between versions,
3:09
we'll get immediate feedback
from within our editor.
3:12
Throughout this course,
3:16
I'll be sure to explain any TypeScript's
specific features or syntax we encounter.
3:17
Another benefit of using TypeScript
is that we can leverage intelligent
3:22
code completion.
3:26
I'll write a function that takes
two premises called rollCall.
3:28
It's going to lock the first
names to the console.
3:34
The two parameters are students and max.
3:38
I want to log only the first names for
the max number of students.
3:43
If max isn't defined, it'll default
to the total length of the array.
3:48
Since I haven't defined students as
an array, I won't get any IntelliSense.
3:59
IntelliSense is a common term used for
referring to intelligent code completion.
4:06
To enable IntelliSense for
the student's parameter,
4:11
I need to define it as an array type.
4:14
An array type has the square
brackets at the end.
4:18
Now, when I assign
the attendance variable,
4:21
I will type students and
as soon as I press the .,
4:31
I'll have more options available to me.
4:35
In this case, I want the slice method.
4:40
As I start typing, TypeScript filters the
options according to what I've entered.
4:43
Once I have the slice method selected,
I'll press Tab.
4:48
The slice method takes two parameters,
both are optional.
4:52
You can tell they're optional by
the question mark in the type definition.
4:56
If we pass in undefined as the first
parameter, we're specifying
5:00
that the slice method will use
the default value for that parameter.
5:05
For the second parameter,
we'll pass in the max parameter so
5:10
that we'll log out as many
students as we specified in max.
5:14
Right now,
the max parameter is of type any
5:24
Which is the default type of TypeScript.
5:30
I'll set this to number So
5:33
we can assure that it will never be
assigned to an incompatible type.
5:38
If I try and assign a string to the max
parameter, Typescript will report
5:45
an error in the editor by placing
a red squiggly line beneath the code.
5:50
We can't assign a string to the variable
max since it's defined as a number
5:55
in the function declaration.
6:00
Let me change max back.
6:02
This is one way Typescript
helps you write better code.
6:04
If I call the rollCall function now,
I'll see some IntelliSense that shows
6:08
what the signature of the function looks
like and what parameters are required.
6:14
Let's type in an array of names,
Jack and Jill.
6:19
And, if we don't provide the function
with a max parameter, we'll get an error.
6:26
The developer calling the roleCall
function doesn't necessarily know
6:32
there's a default value for
max, the length of the array.
6:36
To convey that the max parameter
is optional, we can add a question
6:40
mark to the type definition like
this after the parameter name.
6:45
Now we can use the function with or
without setting the max parameter.
6:51
TypeScript provides a lot more features
than I can show off in this course.
6:55
I encourage you to play around
in the TypeScript playground and
6:59
read the tools documentation.
7:02
I've included some resources
in the teacher's notes.
7:05
For any features of TypeScript
we'll use in this course,
7:08
I'll discuss them as we use them.
7:11
You need to sign up for Treehouse in order to download course files.
Sign up