1
00:00:00,240 --> 00:00:02,220
- Now following on from
the exact same code

2
00:00:02,220 --> 00:00:04,530
we have in the last
video, there's another way

3
00:00:04,530 --> 00:00:07,830
that you can kind of deal
with this any unknown style

4
00:00:07,830 --> 00:00:10,290
and it's a little bit of a
middle ground between the two

5
00:00:10,290 --> 00:00:12,600
because it still gives
up on your type safety

6
00:00:12,600 --> 00:00:14,280
a hundred percent, but it makes you so

7
00:00:14,280 --> 00:00:16,470
at least the rest of
your code doesn't suffer.

8
00:00:16,470 --> 00:00:18,810
That's because we know if
we use any, everywhere else

9
00:00:18,810 --> 00:00:20,550
in your code that uses
that variable suffers

10
00:00:20,550 --> 00:00:22,530
'cause none of your code
knows what it means.

11
00:00:22,530 --> 00:00:25,020
While if you use unknown,
you're essentially forcing

12
00:00:25,020 --> 00:00:26,220
your code to learn what it means

13
00:00:26,220 --> 00:00:28,860
but it requires a lot of
actual upfront coding.

14
00:00:28,860 --> 00:00:31,830
A lot of times if you're doing
a fetch request for example

15
00:00:31,830 --> 00:00:34,350
and you're getting back some
data from that fetch request,

16
00:00:34,350 --> 00:00:36,090
you may have a really complex object

17
00:00:36,090 --> 00:00:38,610
and the code to check to make
sure that's in the right shape

18
00:00:38,610 --> 00:00:41,190
could be hundreds of lines and
it's just not really feasible

19
00:00:41,190 --> 00:00:43,680
to write that code all of the time.

20
00:00:43,680 --> 00:00:44,910
So instead what you may do

21
00:00:44,910 --> 00:00:46,830
is you may want to just cast the variable

22
00:00:46,830 --> 00:00:48,480
to be a specific type.

23
00:00:48,480 --> 00:00:49,470
Lemme show you what I'm talking about.

24
00:00:49,470 --> 00:00:51,090
Let's just do a simple fetch.

25
00:00:51,090 --> 00:00:53,643
We're gonna get our res data as JSON.

26
00:00:54,660 --> 00:00:56,100
We'll come in here with a dot then.

27
00:00:56,100 --> 00:00:59,100
I'm just gonna do a quick
console.log of our data.

28
00:00:59,100 --> 00:01:01,890
You'll see right here our
data is a type of promise

29
00:01:01,890 --> 00:01:02,940
that's returning anything.

30
00:01:02,940 --> 00:01:04,860
That's 'cause I need to make
sure I call this, there we go.

31
00:01:04,860 --> 00:01:06,870
Now you can see that this
is just a type of anything

32
00:01:06,870 --> 00:01:08,790
'cause we don't know what this data is.

33
00:01:08,790 --> 00:01:10,290
Well, if we're developing this API

34
00:01:10,290 --> 00:01:11,910
and we're working with a backend team,

35
00:01:11,910 --> 00:01:14,400
we know what this data should look like.

36
00:01:14,400 --> 00:01:17,040
So, we can maybe get away
with just telling TypeScript

37
00:01:17,040 --> 00:01:18,870
what this is because we know what this is.

38
00:01:18,870 --> 00:01:21,390
We just need to let
TypeScript know what this is.

39
00:01:21,390 --> 00:01:23,520
So if you have a variable
and it's one type,

40
00:01:23,520 --> 00:01:25,650
whatever type it is, whether
it's any or something else,

41
00:01:25,650 --> 00:01:28,560
and you want to specifically
move it to another type,

42
00:01:28,560 --> 00:01:30,120
that's where type casting comes in.

43
00:01:30,120 --> 00:01:31,710
So I'm gonna take this
code and what I wanna do

44
00:01:31,710 --> 00:01:34,590
is I wanna cast this data
variable as a specific type.

45
00:01:34,590 --> 00:01:36,510
So, I can say I wanna cast it as,

46
00:01:36,510 --> 00:01:38,100
let's just say it's
going to be a to-do type.

47
00:01:38,100 --> 00:01:40,080
Let's create that real quick.

48
00:01:40,080 --> 00:01:41,373
Type, to do,

49
00:01:42,540 --> 00:01:44,430
and we'll just give it a
title, which is a name.

50
00:01:44,430 --> 00:01:45,510
We're gonna make it super simple.

51
00:01:45,510 --> 00:01:46,620
There we go, a string right there.

52
00:01:46,620 --> 00:01:47,453
Perfect.

53
00:01:47,453 --> 00:01:48,873
Now let's just return this.

54
00:01:49,710 --> 00:01:51,930
We'll return our data as a to-do

55
00:01:51,930 --> 00:01:53,940
and then we'll add another .then on here

56
00:01:53,940 --> 00:01:55,623
which is gonna take in our to-do.

57
00:01:57,360 --> 00:01:59,340
You'll notice now my
type for my to-do here

58
00:01:59,340 --> 00:02:00,810
is the to-do type.

59
00:02:00,810 --> 00:02:03,960
So this as casting
essentially is saying I expect

60
00:02:03,960 --> 00:02:06,120
this variable to be a particular type,

61
00:02:06,120 --> 00:02:07,590
which, in our case, is to-do.

62
00:02:07,590 --> 00:02:09,150
TypeScript doesn't do any type checking.

63
00:02:09,150 --> 00:02:12,150
It doesn't check to see if
this is a valid to-do or not.

64
00:02:12,150 --> 00:02:14,310
It just says, okay, you know more than me.

65
00:02:14,310 --> 00:02:17,130
I'm going to manually set
this thing as a to-do.

66
00:02:17,130 --> 00:02:19,380
So this doesn't actually
fix your typing problem

67
00:02:19,380 --> 00:02:21,180
because if for some
reason this data returned

68
00:02:21,180 --> 00:02:24,390
is not a to-do, it returns
like a person for example,

69
00:02:24,390 --> 00:02:26,130
your code is still going
to think it's a to-do

70
00:02:26,130 --> 00:02:27,270
even though it's not.

71
00:02:27,270 --> 00:02:28,860
So, it's not perfectly type checking you

72
00:02:28,860 --> 00:02:31,149
like the unknown use case would've done.

73
00:02:31,149 --> 00:02:33,780
But the rest of your code
that's using this data,

74
00:02:33,780 --> 00:02:35,490
in our case, this .then right here,

75
00:02:35,490 --> 00:02:38,730
it now has the proper type that
we expect this thing to be.

76
00:02:38,730 --> 00:02:40,560
So, at least the rest of your
code doesn't have a bunch

77
00:02:40,560 --> 00:02:43,470
of anys flowing through it
and it has the proper type.

78
00:02:43,470 --> 00:02:45,540
Now in my opinion, this
as casting is something

79
00:02:45,540 --> 00:02:48,120
you should very rarely
do inside of TypeScript.

80
00:02:48,120 --> 00:02:50,490
And again, it's because
it goes against TypeScript

81
00:02:50,490 --> 00:02:52,979
and overrides TypeScript and
you're telling it, you know

82
00:02:52,979 --> 00:02:55,380
I know more than you so just trust me.

83
00:02:55,380 --> 00:02:57,510
But it's very often that you can be wrong

84
00:02:57,510 --> 00:02:59,010
and that your assumptions are not always

85
00:02:59,010 --> 00:03:00,540
a hundred percent correct.

86
00:03:00,540 --> 00:03:03,030
So I recommend using this as casting

87
00:03:03,030 --> 00:03:04,770
as an absolute last resort.

88
00:03:04,770 --> 00:03:06,810
I would use it before you use any

89
00:03:06,810 --> 00:03:08,670
but I would definitely
use it as last resort

90
00:03:08,670 --> 00:03:11,340
and if it's the only way that
you can make something work.

91
00:03:11,340 --> 00:03:12,930
But I would recommend looking around

92
00:03:12,930 --> 00:03:14,160
and seeing if there's other solutions.

93
00:03:14,160 --> 00:03:15,780
Maybe you know, doing extra type guards

94
00:03:15,780 --> 00:03:17,190
or something like that is going to be able

95
00:03:17,190 --> 00:03:20,400
to give you the type safety
you expect and this as casting

96
00:03:20,400 --> 00:03:22,530
as to do, you can use it
anywhere you want at all.

97
00:03:22,530 --> 00:03:24,390
So we just have like a variable we can say

98
00:03:24,390 --> 00:03:26,490
like const a equals whatever.

99
00:03:26,490 --> 00:03:27,840
We could cast this however we want.

100
00:03:27,840 --> 00:03:30,000
So we could say like,
right now this is a string,

101
00:03:30,000 --> 00:03:31,710
let's change it to a number
and let's say that we wanted

102
00:03:31,710 --> 00:03:33,630
to get the length of this
as if it was a string.

103
00:03:33,630 --> 00:03:34,950
You'll notice I get an error.

104
00:03:34,950 --> 00:03:36,450
Well I can just come in here,
I'm, you know, you know what?

105
00:03:36,450 --> 00:03:38,190
Treat this as if it was a string

106
00:03:38,190 --> 00:03:39,840
and now if I just add a
semicolon right here so

107
00:03:39,840 --> 00:03:41,970
I get everything to work,
you'll notice I do get an error

108
00:03:41,970 --> 00:03:43,650
'cause essentially I'm
trying to convert a number

109
00:03:43,650 --> 00:03:44,490
to a string.

110
00:03:44,490 --> 00:03:46,350
But if I were to cast this
to something like any,

111
00:03:46,350 --> 00:03:47,970
I could say, you know
what, this is an any type.

112
00:03:47,970 --> 00:03:50,070
Now you can see that this
is working as I expect it to

113
00:03:50,070 --> 00:03:51,480
and it knows that A is a string.

114
00:03:51,480 --> 00:03:54,660
So I can use this wherever I
want to use it essentially.

115
00:03:54,660 --> 00:03:55,980
And if I create a new variable,

116
00:03:55,980 --> 00:03:59,190
like B is equal to A as
string, you can now see

117
00:03:59,190 --> 00:04:01,620
that this B variable is set to a string.

118
00:04:01,620 --> 00:04:03,540
So it essentially just
allows you to convert a type

119
00:04:03,540 --> 00:04:05,760
from one type to another type
but type script's gonna be

120
00:04:05,760 --> 00:04:07,507
at least somewhat smart
enough to tell you like,

121
00:04:07,507 --> 00:04:09,037
"Hey it knows that A is a number

122
00:04:09,037 --> 00:04:10,597
"and you can't convert
a number to a string.

123
00:04:10,597 --> 00:04:12,150
"So like this doesn't work."

124
00:04:12,150 --> 00:04:14,190
But a lot of times when you're
doing this type of casting,

125
00:04:14,190 --> 00:04:15,990
it's 'cause you want to
cast something like any

126
00:04:15,990 --> 00:04:17,703
or unknown to another type.