1
00:00:00,180 --> 00:00:01,710
- All the different type narrowing

2
00:00:01,710 --> 00:00:03,870
that TypeScript can do
is really incredible

3
00:00:03,870 --> 00:00:06,240
but there's certain scenarios
where TypeScript isn't able

4
00:00:06,240 --> 00:00:08,790
to quite do all the type
narrowing we want it to do.

5
00:00:08,790 --> 00:00:11,850
So that's why it introduced
this satisfies keyword.

6
00:00:11,850 --> 00:00:13,020
Take for example, this code.

7
00:00:13,020 --> 00:00:15,270
We have a simple todo
type with a title string

8
00:00:15,270 --> 00:00:16,710
due date that could be a string or a date

9
00:00:16,710 --> 00:00:18,450
and it is complete Boolean.

10
00:00:18,450 --> 00:00:20,100
Then down here I'm defining a todo

11
00:00:20,100 --> 00:00:21,810
but I'm not actually typing it as a todo.

12
00:00:21,810 --> 00:00:23,400
Right now, I'm just defining a todo.

13
00:00:23,400 --> 00:00:26,040
I gave it a title, a due
date, a complete property

14
00:00:26,040 --> 00:00:29,220
and down here I'm just setting
my date to the fourth date.

15
00:00:29,220 --> 00:00:31,200
Now you will notice there
is a problem with my code

16
00:00:31,200 --> 00:00:32,550
that's not being picked up.

17
00:00:32,550 --> 00:00:34,500
You can see I gave it a complete property

18
00:00:34,500 --> 00:00:36,300
instead of an is complete property

19
00:00:36,300 --> 00:00:38,610
and TypeScript isn't
picking up on this typo

20
00:00:38,610 --> 00:00:40,230
and that's because this todo right here

21
00:00:40,230 --> 00:00:42,930
isn't actually typed as my todo type.

22
00:00:42,930 --> 00:00:44,250
I need to manually tell TypeScript,

23
00:00:44,250 --> 00:00:45,960
okay this is a todo type.

24
00:00:45,960 --> 00:00:48,330
So I can come in here and
say todo just like this

25
00:00:48,330 --> 00:00:50,280
and now you can see I'm getting
that error being picked up.

26
00:00:50,280 --> 00:00:52,680
So if I change this to is complete,

27
00:00:52,680 --> 00:00:54,330
you can see that that removes the error

28
00:00:54,330 --> 00:00:56,460
and it fixes that problem
for me, which is great.

29
00:00:56,460 --> 00:00:59,010
But by doing this I've
actually run into another error

30
00:00:59,010 --> 00:01:00,720
and the reason for that is down here.

31
00:01:00,720 --> 00:01:03,870
My due date now can be
either a string or a date.

32
00:01:03,870 --> 00:01:05,910
Even though in reality
if we look at our code

33
00:01:05,910 --> 00:01:08,580
as a normal person, not as
TypeScript, well this todo,

34
00:01:08,580 --> 00:01:10,860
I manually set the due date to a date.

35
00:01:10,860 --> 00:01:13,680
So I know for a fact
that this thing is a date

36
00:01:13,680 --> 00:01:15,750
and before I actually type this as a todo,

37
00:01:15,750 --> 00:01:17,280
TypeScript knew that this was a date

38
00:01:17,280 --> 00:01:18,930
as you can see, I have no errors

39
00:01:18,930 --> 00:01:20,850
but as soon as I try to
give it this todo type

40
00:01:20,850 --> 00:01:23,100
since the due date can
be a string or a date,

41
00:01:23,100 --> 00:01:24,690
TypeScript just takes the types

42
00:01:24,690 --> 00:01:26,190
from the type that you've defined

43
00:01:26,190 --> 00:01:27,720
and uses them instead of the types

44
00:01:27,720 --> 00:01:29,550
inside of my actual object.

45
00:01:29,550 --> 00:01:31,680
So to get around this
problem, what we can do is

46
00:01:31,680 --> 00:01:34,320
instead of actually defining
our type right here,

47
00:01:34,320 --> 00:01:36,210
we can instead after our object say that

48
00:01:36,210 --> 00:01:38,640
it satisfies a particular type.

49
00:01:38,640 --> 00:01:41,310
And by doing that it keeps
all of the specific types

50
00:01:41,310 --> 00:01:44,040
that we have here such as
our due date being a date,

51
00:01:44,040 --> 00:01:46,590
but it allows us to actually
type it as something

52
00:01:46,590 --> 00:01:47,423
like a todo.

53
00:01:47,423 --> 00:01:49,320
So it'll pick up on any typos we have.

54
00:01:49,320 --> 00:01:51,570
So here I can just say satisfies.

55
00:01:51,570 --> 00:01:54,207
I'm gonna say it satisfies
size, the todo type.

56
00:01:54,207 --> 00:01:57,690
Now you can see that my due
date is specifically only a date

57
00:01:57,690 --> 00:01:59,280
and that's because here I specified it

58
00:01:59,280 --> 00:02:00,960
as particularly a date.

59
00:02:00,960 --> 00:02:02,910
When I hover over this todo, you can see

60
00:02:02,910 --> 00:02:05,700
that the type before this todo
is a title that is a string.

61
00:02:05,700 --> 00:02:07,410
It's got a due date which is a date

62
00:02:07,410 --> 00:02:09,180
and it is complete, which is true.

63
00:02:09,180 --> 00:02:12,090
And if I were to spell this
wrong by saying complete instead

64
00:02:12,090 --> 00:02:14,160
you can see I'm now getting
an error and it's saying,

65
00:02:14,160 --> 00:02:16,890
hey, this needs to have an
iscomplete property on it

66
00:02:16,890 --> 00:02:17,910
instead of complete.

67
00:02:17,910 --> 00:02:19,110
You can see right here.

68
00:02:19,110 --> 00:02:21,540
And that's because we're saying
it satisfies this todo type,

69
00:02:21,540 --> 00:02:24,090
which means it has to meet
the minimum requirements

70
00:02:24,090 --> 00:02:27,060
of this type, but it can be more specific.

71
00:02:27,060 --> 00:02:29,400
So in our case, the minimum
requirement is a title

72
00:02:29,400 --> 00:02:31,080
which is a string, which we have;

73
00:02:31,080 --> 00:02:33,360
a due date, which is
either a string or a date.

74
00:02:33,360 --> 00:02:35,670
In our case we have a
due date, which is a date

75
00:02:35,670 --> 00:02:37,590
and it is complete
property, which is Boolean

76
00:02:37,590 --> 00:02:39,000
and that's why we're getting our error

77
00:02:39,000 --> 00:02:41,280
'cause this is spelled incorrectly.

78
00:02:41,280 --> 00:02:43,860
Now the reason this
satisfies property is so nice

79
00:02:43,860 --> 00:02:46,470
is because it allows you to
keep the more specific types

80
00:02:46,470 --> 00:02:47,370
that we've already defined.

81
00:02:47,370 --> 00:02:49,380
For example, the fact
our due date is a date

82
00:02:49,380 --> 00:02:52,590
while making sure it actually
follows the more generic type

83
00:02:52,590 --> 00:02:53,580
that we want it to.

84
00:02:53,580 --> 00:02:56,670
So essentially satisfies just
says my more specific thing

85
00:02:56,670 --> 00:02:58,770
must meet these minimum requirements.

86
00:02:58,770 --> 00:03:00,120
If it does, that's great.

87
00:03:00,120 --> 00:03:01,470
I'm not gonna get any errors

88
00:03:01,470 --> 00:03:02,970
and I'm going to still get to keep

89
00:03:02,970 --> 00:03:05,550
all my extra typing
information that I had before.

90
00:03:05,550 --> 00:03:08,520
So a lot of times when you're
defining an object like this

91
00:03:08,520 --> 00:03:09,840
that is supposed to be one type

92
00:03:09,840 --> 00:03:11,940
and you wanna give it
more specific information

93
00:03:11,940 --> 00:03:13,560
than the actual type gives you,

94
00:03:13,560 --> 00:03:14,910
that's where the satisfies property

95
00:03:14,910 --> 00:03:18,000
which is relatively new to
TypeScript is really amazing.

96
00:03:18,000 --> 00:03:20,220
And if you're wondering when
you may want to use this,

97
00:03:20,220 --> 00:03:22,020
really you'll know you want to use this

98
00:03:22,020 --> 00:03:24,570
when you want to type
something as a particular type.

99
00:03:24,570 --> 00:03:27,270
So in our case, we want
to type this as a todo

100
00:03:27,270 --> 00:03:30,630
but by doing so I lose my
more specific information

101
00:03:30,630 --> 00:03:32,310
such as the fact that this is a date.

102
00:03:32,310 --> 00:03:34,290
So when you want to type
something as one type,

103
00:03:34,290 --> 00:03:37,170
but by doing so makes you
lose the specific information

104
00:03:37,170 --> 00:03:39,240
that makes working with
TypeScript so nice.

105
00:03:39,240 --> 00:03:40,530
That's the perfect use case

106
00:03:40,530 --> 00:03:43,170
for where you want to
use satisfies instead

107
00:03:43,170 --> 00:03:45,240
because it allows you to
keep that specific nature

108
00:03:45,240 --> 00:03:47,493
while ensuring it follows
that specific type.