1
00:00:00,210 --> 00:00:01,530
- Now, the next modifier I wanna talk

2
00:00:01,530 --> 00:00:03,480
about is the typeof modifier,

3
00:00:03,480 --> 00:00:04,860
and it's actually different than

4
00:00:04,860 --> 00:00:07,380
the type of modifier in JavaScript.

5
00:00:07,380 --> 00:00:08,940
If you're used to JavaScript code,

6
00:00:08,940 --> 00:00:10,500
you know that you can take any variable

7
00:00:10,500 --> 00:00:11,948
and you can get the type
of it by just saying,

8
00:00:11,948 --> 00:00:14,070
typeof, all by the variable name,

9
00:00:14,070 --> 00:00:16,320
and this will return to it,
it's like object, string,

10
00:00:16,320 --> 00:00:19,860
number, Boolean, whatever it
is, but inside of TypeScript,

11
00:00:19,860 --> 00:00:22,230
when you use this as a type definition,

12
00:00:22,230 --> 00:00:25,140
it works a little bit differently.

13
00:00:25,140 --> 00:00:27,720
Essentially, what it does
is it tries to get the type

14
00:00:27,720 --> 00:00:30,090
of something and it uses that as

15
00:00:30,090 --> 00:00:32,970
whatever the type of this
new thing is going to be.

16
00:00:32,970 --> 00:00:35,340
In our case, you can see here
that I have a person object,

17
00:00:35,340 --> 00:00:36,930
which just has a name and an age.

18
00:00:36,930 --> 00:00:38,220
Then, I have a people array

19
00:00:38,220 --> 00:00:40,320
and I'm adding in some
people to that array

20
00:00:40,320 --> 00:00:43,260
and I'm also pushing a number
to that array, and obviously,

21
00:00:43,260 --> 00:00:44,490
I want to make sure that this array

22
00:00:44,490 --> 00:00:46,860
can only have people inside of it.

23
00:00:46,860 --> 00:00:49,110
So I could manually
type this out by saying,

24
00:00:49,110 --> 00:00:52,110
name, string, age is going to be number,

25
00:00:52,110 --> 00:00:53,430
just like that, and now,

26
00:00:53,430 --> 00:00:54,600
it's going to work where I'm going

27
00:00:54,600 --> 00:00:56,940
to be getting an error
array here for this.

28
00:00:56,940 --> 00:00:58,950
I need to make sure that this
is an array. There we go.

29
00:00:58,950 --> 00:00:59,783
So as you can see,

30
00:00:59,783 --> 00:01:00,616
I'm getting an error because I'm trying

31
00:01:00,616 --> 00:01:02,160
to push two into here,

32
00:01:02,160 --> 00:01:04,260
but this is a bit of a problem
because let's say I want

33
00:01:04,260 --> 00:01:07,080
to add additional properties
to this user here.

34
00:01:07,080 --> 00:01:08,640
Well, I would also need
to make sure I add them

35
00:01:08,640 --> 00:01:10,530
up in this type here as well.

36
00:01:10,530 --> 00:01:12,540
That is not always super ideal.

37
00:01:12,540 --> 00:01:14,520
So instead, we have this person up here.

38
00:01:14,520 --> 00:01:16,980
I'm gonna make sure I just
push them into this array.

39
00:01:16,980 --> 00:01:17,880
We can just push 'em like that,

40
00:01:17,880 --> 00:01:19,860
that works fine, and essentially,

41
00:01:19,860 --> 00:01:22,440
I want the type of my
people array to be whatever

42
00:01:22,440 --> 00:01:24,960
the type of this person object is.

43
00:01:24,960 --> 00:01:27,300
Well, I can just do that
inside of JavaScript.

44
00:01:27,300 --> 00:01:29,130
I can say here that I want to get

45
00:01:29,130 --> 00:01:31,500
the type of, this person variable,

46
00:01:31,500 --> 00:01:33,030
and the type of this person variable

47
00:01:33,030 --> 00:01:35,070
is just going to be this type right here.

48
00:01:35,070 --> 00:01:36,360
It's gonna be a name that's a string

49
00:01:36,360 --> 00:01:37,470
and an age that's a number.

50
00:01:37,470 --> 00:01:38,730
As you can see, if we hover over this,

51
00:01:38,730 --> 00:01:40,350
that's exactly what
it's getting from here.

52
00:01:40,350 --> 00:01:41,850
Now, I want to make this an array,

53
00:01:41,850 --> 00:01:44,040
so I can just put some
parentheses around this,

54
00:01:44,040 --> 00:01:46,230
say that this is the
array syntax, and now,

55
00:01:46,230 --> 00:01:47,790
if I add properties, for example,

56
00:01:47,790 --> 00:01:50,580
to this person up here,
such as isProgrammer,

57
00:01:50,580 --> 00:01:52,440
and I make that a Boolean,

58
00:01:52,440 --> 00:01:54,390
you can now see that I'm
getting an error right here

59
00:01:54,390 --> 00:01:57,240
'cause this is missing that
isProgrammer property, and now,

60
00:01:57,240 --> 00:01:58,980
I wanna add that in, you
can see it's working fine,

61
00:01:58,980 --> 00:02:01,440
and this should say an
actual value right there,

62
00:02:01,440 --> 00:02:03,540
there we go, and if I remove this again,

63
00:02:03,540 --> 00:02:04,500
you'll see that I'm getting error

64
00:02:04,500 --> 00:02:06,120
until I add it back in there.

65
00:02:06,120 --> 00:02:08,220
So the really great thing
is that my people array

66
00:02:08,220 --> 00:02:10,860
is essentially depending on
this person variable right here,

67
00:02:10,860 --> 00:02:12,480
which is really nice.

68
00:02:12,480 --> 00:02:14,670
So this is one place where
you may want to use this.

69
00:02:14,670 --> 00:02:16,680
Another place is if you have a function,

70
00:02:16,680 --> 00:02:19,830
let's just say, we'll call
it, "Say hi," there we go,

71
00:02:19,830 --> 00:02:23,553
we'll give it a name, there's
a string, console.log name,

72
00:02:23,553 --> 00:02:27,150
there we go, so it's just
gonna be saying "hi," whatever,

73
00:02:27,150 --> 00:02:28,800
if I wanted to get the type of this,

74
00:02:28,800 --> 00:02:30,767
I could just say, "typeof sayHi,"

75
00:02:31,797 --> 00:02:33,120
and I could set that to a specific type,

76
00:02:33,120 --> 00:02:36,000
I could say, like, "type
FuncType is equal to,"

77
00:02:36,000 --> 00:02:37,290
and now, if I hover over this,

78
00:02:37,290 --> 00:02:39,090
you can see it gives me the type signature

79
00:02:39,090 --> 00:02:40,560
of that exact function.

80
00:02:40,560 --> 00:02:42,180
This is another really useful place

81
00:02:42,180 --> 00:02:44,310
where you can use this type of function.

82
00:02:44,310 --> 00:02:46,620
Now, the one thing to know about typeof is

83
00:02:46,620 --> 00:02:48,330
that you can't do super complex stuff.

84
00:02:48,330 --> 00:02:51,030
You can pretty much just pass
it a variable and that's it.

85
00:02:51,030 --> 00:02:53,490
Like, I can't call this sayHi function

86
00:02:53,490 --> 00:02:55,080
and get the return value of that

87
00:02:55,080 --> 00:02:56,430
and do kind of fancy stuff with that.

88
00:02:56,430 --> 00:02:58,110
This doesn't work. This
is gonna throw an error.

89
00:02:58,110 --> 00:03:00,060
You can pretty much
just pass it a variable

90
00:03:00,060 --> 00:03:02,880
or a function name and that
is about all you can do.

91
00:03:02,880 --> 00:03:04,950
This is something that
may seem kind of niche,

92
00:03:04,950 --> 00:03:06,030
but as you start to get to some

93
00:03:06,030 --> 00:03:07,920
of the more advanced
use cases of TypeScript,

94
00:03:07,920 --> 00:03:09,900
you're gonna be doing stuff
like this all the time,

95
00:03:09,900 --> 00:03:12,330
and this function use case
is a really common example

96
00:03:12,330 --> 00:03:14,723
of where you might want
to do something like this.