1
00:00:00,250 --> 00:00:03,585
In our last video,
we talked about function type expressions.

2
00:00:03,585 --> 00:00:06,100
It was pretty short, but
it was really useful.

3
00:00:07,310 --> 00:00:10,180
Now, you can give functions
some proper types.

4
00:00:10,180 --> 00:00:13,920
Unfortunately, this is
the last video of the course.

5
00:00:13,920 --> 00:00:16,752
I know, you're crying behind
the computer screen, and

6
00:00:16,752 --> 00:00:19,270
it would be really sad to see you go.

7
00:00:19,270 --> 00:00:24,083
As this is the last video, I thought I'd
talk about something small that you might

8
00:00:24,083 --> 00:00:29,500
find useful when writing TypeScript,
something called a type assertion.

9
00:00:29,500 --> 00:00:30,933
If you want to follow along,

10
00:00:30,933 --> 00:00:34,750
we'll be working from
the type-assertions-begin folder.

11
00:00:34,750 --> 00:00:40,232
This can be found in the functions-in-ts
folder. I'll show you where that is.

12
00:00:40,232 --> 00:00:42,650
I need to open the file
explorer on the left.

13
00:00:42,650 --> 00:00:46,306
Navigate to the functions-in-ts folder,
and we'll see that

14
00:00:46,306 --> 00:00:51,300
there is a type-assertions-begin
folder down here. It should be empty.

15
00:00:51,300 --> 00:00:54,392
Of course,
there is a type-assertions-end folder,

16
00:00:54,392 --> 00:00:58,090
which should contain the code we're
going to write in this video.

17
00:00:59,220 --> 00:01:01,638
Let's create a new file
called type-assertions.

18
00:01:07,423 --> 00:01:11,658
Now, let's say you have a website
with a button on it somewhere, and

19
00:01:11,658 --> 00:01:15,540
you want to write some code
to click on that button.

20
00:01:15,540 --> 00:01:19,840
Let's close the file explorer on the left
and create a variable called button.

21
00:01:19,840 --> 00:01:24,263
We're going to use some front-end
JavaScript to select that button.

22
00:01:34,777 --> 00:01:39,149
What we're doing here is
selecting that button's CSS class,

23
00:01:39,149 --> 00:01:41,740
which in this case is main-button.

24
00:01:41,740 --> 00:01:46,813
Now let's run the click method on our
button variable to click on the button.

25
00:01:49,860 --> 00:01:50,882
As you can see,

26
00:01:50,882 --> 00:01:55,613
TypeScript has given us an error
saying that this object could be null.

27
00:01:55,613 --> 00:02:00,910
Which is true, because the button
element might not exist on the page.

28
00:02:00,910 --> 00:02:05,394
We can fix this by adding an if
statement to say, if the button exists,

29
00:02:05,394 --> 00:02:07,303
then run the click function.

30
00:02:10,458 --> 00:02:12,700
But now we have another error.

31
00:02:12,700 --> 00:02:16,510
Before I continue,
I've written the if statement on one line.

32
00:02:16,510 --> 00:02:22,190
Basically, this is the same as having
an if statement with curly braces.

33
00:02:22,190 --> 00:02:24,749
This is perfectly valid JavaScript and

34
00:02:24,749 --> 00:02:29,330
useful if you don't have a lot of
code to put inside your if statement.

35
00:02:30,330 --> 00:02:35,223
Okay, so we solved the first error,
and now we have another one.

36
00:02:35,223 --> 00:02:39,997
TypeScript is telling us that
the click property does not

37
00:02:39,997 --> 00:02:43,087
exist on type Element, why is that?

38
00:02:43,087 --> 00:02:47,274
Well, if we hover over
our myButton variable,

39
00:02:47,274 --> 00:02:53,143
the TypeScript type inferencing
has given this a type of Element.

40
00:02:53,143 --> 00:02:56,376
It's done this because it thinks
this is the type of myButton

41
00:02:56,376 --> 00:02:58,390
based on the querySelector function.

42
00:02:59,640 --> 00:03:04,727
Now, of course, we know that if we were to
use the querySelector on a button element,

43
00:03:04,727 --> 00:03:08,620
we should have the click
function available to us.

44
00:03:08,620 --> 00:03:12,670
So we can tell TypeScript
that we know better.

45
00:03:12,670 --> 00:03:14,590
We can do this in two ways.

46
00:03:14,590 --> 00:03:17,788
The first way is by
using a type annotation,

47
00:03:17,788 --> 00:03:20,300
which looks something like this.

48
00:03:26,491 --> 00:03:31,408
Here, we're telling TypeScript
that the element that we get using

49
00:03:31,408 --> 00:03:36,160
the querySelector will be
of type HTMLButtonElement.

50
00:03:36,160 --> 00:03:39,611
If you want to know more about
the HTMLButtonElement type,

51
00:03:39,611 --> 00:03:41,550
check out the teacher's notes.

52
00:03:42,760 --> 00:03:47,640
So using a type annotation is
a good way of solving that issue.

53
00:03:47,640 --> 00:03:50,450
But there is another more readable way.

54
00:03:50,450 --> 00:03:54,762
The second way to fix this would
be to use a type assertion,

55
00:03:54,762 --> 00:03:57,319
which looks something like this.

56
00:04:01,036 --> 00:04:05,198
Again, here, we're telling
TypeScript that we know better,

57
00:04:05,198 --> 00:04:10,000
and we'd like the element type
to be converted or casted or

58
00:04:10,000 --> 00:04:14,148
type casted into a HTMLButtonElement.

59
00:04:14,148 --> 00:04:19,183
Actually, there is a third way, but
it's a bit complex, let me show you.

60
00:04:21,856 --> 00:04:26,818
This technique works as well, but
this is a beginner TypeScript course, so

61
00:04:26,818 --> 00:04:29,776
I'm not going to talk
about this technique.

62
00:04:29,776 --> 00:04:32,200
But it's good to know it does exist.

63
00:04:32,200 --> 00:04:33,890
Let's go back to the type assertion.

64
00:04:35,690 --> 00:04:36,732
Now bear in mind,

65
00:04:36,732 --> 00:04:42,280
converting one type to another only works
if there's an overlap between types.

66
00:04:42,280 --> 00:04:43,500
Let me give you another example.

67
00:04:44,550 --> 00:04:49,150
For this example, we're going to
be making use of our Employee and

68
00:04:49,150 --> 00:04:53,356
Manager type aliases we first
created in our generics file.

69
00:04:53,356 --> 00:04:57,116
If you haven't watched that video,
you can go ahead and

70
00:04:57,116 --> 00:05:01,436
copy those type aliases from
the type-assertions-end file.

71
00:05:01,436 --> 00:05:04,148
Let me show you where that is.

72
00:05:04,148 --> 00:05:09,958
In the type-assertions-end folder, we can
open the type-assertions file, scroll

73
00:05:09,958 --> 00:05:15,386
down, and we'll see that there are two
type aliases called Employee and Manager.

74
00:05:15,386 --> 00:05:20,600
But you can copy those into the file
in the type-assertions-begin folder and

75
00:05:20,600 --> 00:05:22,104
remove the comments.

76
00:05:26,143 --> 00:05:30,408
As I already have these types,
TypeScript is giving me an error.

77
00:05:30,408 --> 00:05:35,230
But if you don't have these types,
TypeScript will not give you an error.

78
00:05:36,290 --> 00:05:39,600
Anyway, let's get rid of these and
continue with the code.

79
00:05:40,670 --> 00:05:44,774
I'm going to create a variable called ken,
give it a type of Employee,

80
00:05:44,774 --> 00:05:51,319
and give it a value of an object with
two properties, name Ken and job dancer,

81
00:06:05,345 --> 00:06:08,770
Now let's create another
variable called john.

82
00:06:08,770 --> 00:06:13,555
And we'll give it the value of ken
with a type assertion of Manager.

83
00:06:21,638 --> 00:06:25,713
You can see on line 10 that we get
an error from TypeScript saying that there

84
00:06:25,713 --> 00:06:27,690
isn't sufficient overlap.

85
00:06:27,690 --> 00:06:33,030
So the Employee type cannot be
converted into a Manager type.

86
00:06:33,030 --> 00:06:36,980
Let's have a look at the full error by
hovering over the red squiggly line.

87
00:06:38,880 --> 00:06:44,921
You can see that the exact words
sufficient overlaps are in the error.

88
00:06:44,921 --> 00:06:50,341
We can fix this by either adding the job
property to our Manager type alias,

89
00:06:50,341 --> 00:06:53,192
or we can create an intersection type.

90
00:06:53,192 --> 00:06:57,522
As we've already created
an intersection type of Employee and

91
00:06:57,522 --> 00:07:02,280
Manager called TeamLead,
we can make use of that here.

92
00:07:02,280 --> 00:07:06,180
Again, if you don't have access
to the TeamLead type alias,

93
00:07:06,180 --> 00:07:10,430
you can find it in
the type-assertions-end folder.

94
00:07:10,430 --> 00:07:12,450
Let me show you where that is.

95
00:07:12,450 --> 00:07:17,390
If I open this file again and scroll down
to line 27, we can copy this line and

96
00:07:17,390 --> 00:07:20,824
paste it inside our
type-assertions-begin file.

97
00:07:20,824 --> 00:07:25,440
But as I already have the TeamLead
type alias, I don't need to do that.

98
00:07:26,560 --> 00:07:30,213
Lets replace Manager with TeamLead.

99
00:07:30,213 --> 00:07:35,210
And you can see the error we had from
TypeScript before has now disappeared.

100
00:07:35,210 --> 00:07:40,638
TeamLead is a combination of both
types and contains the name and

101
00:07:40,638 --> 00:07:47,688
job properties as well as the managers
property, so TypeScript is okay with this.

102
00:07:47,688 --> 00:07:51,023
And that's all we have for
type assertions in this video.

103
00:07:51,023 --> 00:07:54,279
And sadly this marks
the end of the course.