1
00:00:00,250 --> 00:00:01,340
Welcome back.

2
00:00:01,340 --> 00:00:05,010
In our last video,
we talked about type narrowing.

3
00:00:05,010 --> 00:00:09,390
And in this video, we're going to
talk about function type expressions.

4
00:00:09,390 --> 00:00:10,739
If you want to follow along,

5
00:00:10,739 --> 00:00:14,980
make sure you've downloaded the project
files that come with this course.

6
00:00:14,980 --> 00:00:19,042
We're going to be working from
the function-types-begin folder.

7
00:00:19,042 --> 00:00:20,140
Let me show you where that is.

8
00:00:21,290 --> 00:00:23,120
I'm going to open
the File Explorer on the left.

9
00:00:24,450 --> 00:00:27,540
Navigate to the functions-in-ts folder.

10
00:00:27,540 --> 00:00:32,300
And you'll see that the
function-types-begin folder is inside it.

11
00:00:32,300 --> 00:00:35,680
Of course there is
a function-types-end folder

12
00:00:35,680 --> 00:00:38,720
that contains all the code we're
going to write in this video.

13
00:00:39,780 --> 00:00:42,470
Let's create a new file
called function-types.

14
00:00:47,029 --> 00:00:51,727
Let's create a function called shout,
which will take in an argument as a string

15
00:00:51,727 --> 00:00:55,240
and run the toUpperCase
method on that string.

16
00:00:55,240 --> 00:00:58,308
I'm going to close
the File Explorer on the left

17
00:00:58,308 --> 00:00:59,942
and start writing some code.

18
00:01:11,226 --> 00:01:16,001
Now let's create a function called scream
which will console log our shout function

19
00:01:30,791 --> 00:01:34,024
We're going to give this
error return type of void.

20
00:01:34,024 --> 00:01:38,981
And while we're at it, let's give our
shout function a return type of string.

21
00:01:43,542 --> 00:01:46,728
Cool, so
we have our shout function on line 1,

22
00:01:46,728 --> 00:01:52,340
which will return the argument we put
into it with the toUpperCase function.

23
00:01:52,340 --> 00:01:57,119
And we have our scream function on
line 5 that takes in two arguments.

24
00:01:57,119 --> 00:02:01,011
Our text which is a string and
a function which is shout.

25
00:02:01,011 --> 00:02:05,607
This will run the shout function
with our first argument of text and

26
00:02:05,607 --> 00:02:10,057
console log the results with a few
exclamation marks at the end.

27
00:02:10,057 --> 00:02:15,091
In this course, we've gone through how
to write types in many different ways.

28
00:02:15,091 --> 00:02:19,876
But on line 5 for our second argument
of shout how do you think we would

29
00:02:19,876 --> 00:02:23,450
write a type for this sort of argument?

30
00:02:23,450 --> 00:02:27,800
Well, this is where function type
expressions would be useful.

31
00:02:27,800 --> 00:02:31,806
Believe it or not, it's possible
in TypeScript to create a type for

32
00:02:31,806 --> 00:02:33,750
a shout function.

33
00:02:33,750 --> 00:02:34,500
Let's do it now.

34
00:02:42,536 --> 00:02:44,511
And that's it, congratulations,

35
00:02:44,511 --> 00:02:48,470
you've just created your first
function type expression.

36
00:02:48,470 --> 00:02:52,599
I know it looks a bit weird so
you're welcome to pause this video and

37
00:02:52,599 --> 00:02:56,674
take a second to look at it and
try and figure out what's going on.

38
00:02:56,674 --> 00:03:00,924
Basically, what's taking place is for
this type, the text and

39
00:03:00,924 --> 00:03:06,510
string in parentheses on this part
of the type refer to an argument.

40
00:03:06,510 --> 00:03:10,966
Now, I've written the word text
here to make it match our shout

41
00:03:10,966 --> 00:03:12,491
function on line 1.

42
00:03:12,491 --> 00:03:14,890
But this here could be anything.

43
00:03:14,890 --> 00:03:18,450
It could be a, it could be T,
it could be anything you want it to be.

44
00:03:19,530 --> 00:03:22,599
So we now know the first
part of our function type

45
00:03:22,599 --> 00:03:26,451
on line 5 represents an argument
that has a type of string.

46
00:03:26,451 --> 00:03:30,351
The second part of our function
type expression over here means

47
00:03:30,351 --> 00:03:35,600
that the function that's being
passed into it must return a string.

48
00:03:35,600 --> 00:03:39,195
So if the function we pass into it
is returning a number or a Boolean,

49
00:03:39,195 --> 00:03:41,350
we should see an error from TypeScript.

50
00:03:42,490 --> 00:03:45,800
I'll show you that specific
case later on in this video.

51
00:03:45,800 --> 00:03:47,879
For now, let's create a type alias for

52
00:03:47,879 --> 00:03:52,340
our function type expression just to
make things a bit easier to read.

53
00:03:52,340 --> 00:03:54,633
We'll call this type alias ShoutFn.

54
00:04:00,073 --> 00:04:05,576
And now we can replace our
type of shout with ShoutFn.

55
00:04:05,576 --> 00:04:07,863
Function type expressions can have types,

56
00:04:07,863 --> 00:04:11,190
just like the ones we've
gone through in this course.

57
00:04:11,190 --> 00:04:17,000
So, they can have optional types,
union types, and even intersection types.

58
00:04:17,000 --> 00:04:21,170
Whatever you can think of, you can
put it in a function type expression.

59
00:04:21,170 --> 00:04:25,140
You can even apply function
type expressions to variables.

60
00:04:25,140 --> 00:04:26,710
Let me show you how.

61
00:04:26,710 --> 00:04:31,396
Let's create a variable called shoutAgain,
and give it a type of shoutFn.

62
00:04:37,280 --> 00:04:41,846
Now we can give it our shout function
as a value, or we could give it

63
00:04:41,846 --> 00:04:47,820
an anonymous function, which meets
the criteria of our ShoutFn type alias.

64
00:04:47,820 --> 00:04:48,550
Let's try that

65
00:05:01,533 --> 00:05:04,178
And if we wanted to run
our shoutAgain function,

66
00:05:04,178 --> 00:05:06,380
we could simply do something like this.

67
00:05:10,663 --> 00:05:13,626
Okay let's go back to our scream function,

68
00:05:13,626 --> 00:05:17,564
let's run that below our
shoutAgain function on line 15

69
00:05:27,520 --> 00:05:28,669
As I said before,

70
00:05:28,669 --> 00:05:33,201
if we change our shout function on
line 1 to something like a Boolean.

71
00:05:35,245 --> 00:05:39,485
And also change the return type,
we get an error on line 17.

72
00:05:39,485 --> 00:05:44,199
Saying that the second argument of
the scream function is expecting

73
00:05:44,199 --> 00:05:48,840
a function that returns a string,
not one that returns a boolean.

74
00:05:49,880 --> 00:05:52,680
Let's undo the change we
made to fix that error.

75
00:05:54,940 --> 00:05:58,170
Okay, I think that's enough
on function type expressions.

76
00:05:58,170 --> 00:05:59,630
Short and sweet.

77
00:05:59,630 --> 00:06:04,041
In our next video we'll go through
something that isn't really related to

78
00:06:04,041 --> 00:06:09,098
functions but something you'll find very
useful nevertheless, type assertions.

79
00:06:09,098 --> 00:06:13,645
It's another thing that sounds complicated
but it's actually really easy.

80
00:06:13,645 --> 00:06:16,510
I'll tell you all about
them in the next video.