1
00:00:00,800 --> 00:00:05,380
Angular is the first major front-end
framework to incorporate TypeScript.

2
00:00:05,380 --> 00:00:08,490
While you may enjoy the flexibility
of a dynamically-typed

3
00:00:08,490 --> 00:00:12,715
language such as JavaScript, you're
likely to have experienced moments where

4
00:00:12,715 --> 00:00:16,150
third-party libraries didn't
work as documented and

5
00:00:16,150 --> 00:00:19,960
maybe that's because you passed in
the wrong values into a method call.

6
00:00:19,960 --> 00:00:23,500
This is precisely why Angular
is built on TypeScript.

7
00:00:23,500 --> 00:00:27,360
The documentation is right there at
your fingertips when you're developing,

8
00:00:27,360 --> 00:00:28,570
keeping you in the editor.

9
00:00:29,995 --> 00:00:33,490
TypeScript is a type
superset of JavaScript and

10
00:00:33,490 --> 00:00:36,930
it has all the same features and
syntax of JavaScript so that you

11
00:00:36,930 --> 00:00:42,238
don't need to learn something new but it
includes static typing for added safety.

12
00:00:42,238 --> 00:00:47,670
In addition, TypeScript allows you to
write in ECMAScript 2015 syntax and

13
00:00:47,670 --> 00:00:52,570
have it transpiled to all the versions of
the language for greater browser support.

14
00:00:52,570 --> 00:00:58,700
If we head over to typescriptlang.org and
click on the Playground button,

15
00:00:58,700 --> 00:01:04,000
we can write some TypeScript and
compare it with transpiled JavaScript.

16
00:01:04,000 --> 00:01:09,416
Let's go ahead and
write a Greeter class with a greet method.

17
00:01:11,577 --> 00:01:14,780
The greet method takes
a single parameter name.

18
00:01:16,614 --> 00:01:20,188
Let's log out this name with console.log.

19
00:01:25,463 --> 00:01:27,575
Hi, name.

20
00:01:30,202 --> 00:01:34,195
Finally, let's create
an instance of the greeter.

21
00:01:38,444 --> 00:01:47,296
And then,
call the greet method With the string Jim.

22
00:01:52,200 --> 00:01:56,957
This is a valid JavaScript class and
there's nothing here that's specific

23
00:01:56,957 --> 00:02:00,311
to TypeScript, yet,
it's also valid TypeScript.

24
00:02:00,311 --> 00:02:03,945
Because I didn't provide any
types to the greet method,

25
00:02:03,945 --> 00:02:08,080
I can't be certain that the value
passed in will be a string.

26
00:02:08,080 --> 00:02:12,820
I'd like to enforce that rule so
that function works as expected.

27
00:02:12,820 --> 00:02:16,620
If I add a bit of metadata
to the function's signature,

28
00:02:16,620 --> 00:02:21,120
I can prevent the caller from
passing in a number or the type.

29
00:02:22,370 --> 00:02:24,543
If I change Jim to 5,

30
00:02:26,087 --> 00:02:30,470
We'll see an indicator telling us
that there's a problem with our code.

31
00:02:30,470 --> 00:02:34,300
If I hover over the code,
I'll see what the problem is.

32
00:02:34,300 --> 00:02:38,870
That the argument name cannot be
a number but it has to be a string.

33
00:02:38,870 --> 00:02:41,000
This is the Typescript language service,

34
00:02:41,000 --> 00:02:45,930
interpreting our code at design time not
when our application runs, pretty neat.

35
00:02:45,930 --> 00:02:49,480
TypeScript is baked into
every Angular application.

36
00:02:49,480 --> 00:02:53,260
And provided you're using an editor
that supports TypeScript,

37
00:02:53,260 --> 00:02:57,690
you can reap the benefits of intelligent
warnings and error detection.

38
00:02:57,690 --> 00:03:01,960
We'll be using Visual Studio Code
going forward.

39
00:03:01,960 --> 00:03:05,240
Visual Studio Code supports
TypeScript out of the box,

40
00:03:05,240 --> 00:03:09,840
you can download it at
code.visualstudio.com.

41
00:03:09,840 --> 00:03:12,900
If an Angular API changes
between versions,

42
00:03:12,900 --> 00:03:16,330
we'll get immediate feedback
from within our editor.

43
00:03:16,330 --> 00:03:17,290
Throughout this course,

44
00:03:17,290 --> 00:03:22,400
I'll be sure to explain any TypeScript's
specific features or syntax we encounter.

45
00:03:22,400 --> 00:03:26,760
Another benefit of using TypeScript
is that we can leverage intelligent

46
00:03:26,760 --> 00:03:28,120
code completion.

47
00:03:28,120 --> 00:03:33,188
I'll write a function that takes
two premises called rollCall.

48
00:03:34,901 --> 00:03:38,340
It's going to lock the first
names to the console.

49
00:03:38,340 --> 00:03:42,140
The two parameters are students and max.

50
00:03:43,980 --> 00:03:48,260
I want to log only the first names for
the max number of students.

51
00:03:48,260 --> 00:03:53,180
If max isn't defined, it'll default
to the total length of the array.

52
00:03:59,675 --> 00:04:06,190
Since I haven't defined students as
an array, I won't get any IntelliSense.

53
00:04:06,190 --> 00:04:11,290
IntelliSense is a common term used for
referring to intelligent code completion.

54
00:04:11,290 --> 00:04:14,461
To enable IntelliSense for
the student's parameter,

55
00:04:14,461 --> 00:04:16,491
I need to define it as an array type.

56
00:04:18,150 --> 00:04:21,790
An array type has the square
brackets at the end.

57
00:04:21,790 --> 00:04:25,670
Now, when I assign
the attendance variable,

58
00:04:31,122 --> 00:04:35,517
I will type students and
as soon as I press the .,

59
00:04:35,517 --> 00:04:39,280
I'll have more options available to me.

60
00:04:40,510 --> 00:04:43,440
In this case, I want the slice method.

61
00:04:43,440 --> 00:04:48,570
As I start typing, TypeScript filters the
options according to what I've entered.

62
00:04:48,570 --> 00:04:52,490
Once I have the slice method selected,
I'll press Tab.

63
00:04:52,490 --> 00:04:56,295
The slice method takes two parameters,
both are optional.

64
00:04:56,295 --> 00:05:00,555
You can tell they're optional by
the question mark in the type definition.

65
00:05:00,555 --> 00:05:05,015
If we pass in undefined as the first
parameter, we're specifying

66
00:05:05,015 --> 00:05:08,895
that the slice method will use
the default value for that parameter.

67
00:05:10,350 --> 00:05:14,629
For the second parameter,
we'll pass in the max parameter so

68
00:05:14,629 --> 00:05:18,748
that we'll log out as many
students as we specified in max.

69
00:05:24,237 --> 00:05:28,419
Right now,
the max parameter is of type any

70
00:05:30,129 --> 00:05:33,316
Which is the default type of TypeScript.

71
00:05:33,316 --> 00:05:38,415
I'll set this to number So

72
00:05:38,415 --> 00:05:43,173
we can assure that it will never be
assigned to an incompatible type.

73
00:05:45,165 --> 00:05:50,355
If I try and assign a string to the max
parameter, Typescript will report

74
00:05:50,355 --> 00:05:55,388
an error in the editor by placing
a red squiggly line beneath the code.

75
00:05:55,388 --> 00:06:00,385
We can't assign a string to the variable
max since it's defined as a number

76
00:06:00,385 --> 00:06:02,461
in the function declaration.

77
00:06:02,461 --> 00:06:04,500
Let me change max back.

78
00:06:04,500 --> 00:06:08,220
This is one way Typescript
helps you write better code.

79
00:06:08,220 --> 00:06:14,030
If I call the rollCall function now,
I'll see some IntelliSense that shows

80
00:06:14,030 --> 00:06:19,130
what the signature of the function looks
like and what parameters are required.

81
00:06:19,130 --> 00:06:22,087
Let's type in an array of names,
Jack and Jill.

82
00:06:26,540 --> 00:06:32,440
And, if we don't provide the function
with a max parameter, we'll get an error.

83
00:06:32,440 --> 00:06:36,830
The developer calling the roleCall
function doesn't necessarily know

84
00:06:36,830 --> 00:06:40,630
there's a default value for
max, the length of the array.

85
00:06:40,630 --> 00:06:45,720
To convey that the max parameter
is optional, we can add a question

86
00:06:45,720 --> 00:06:51,150
mark to the type definition like
this after the parameter name.

87
00:06:51,150 --> 00:06:55,880
Now we can use the function with or
without setting the max parameter.

88
00:06:55,880 --> 00:06:59,630
TypeScript provides a lot more features
than I can show off in this course.

89
00:06:59,630 --> 00:07:02,930
I encourage you to play around
in the TypeScript playground and

90
00:07:02,930 --> 00:07:05,210
read the tools documentation.

91
00:07:05,210 --> 00:07:08,050
I've included some resources
in the teacher's notes.

92
00:07:08,050 --> 00:07:11,010
For any features of TypeScript
we'll use in this course,

93
00:07:11,010 --> 00:07:12,500
I'll discuss them as we use them.