1
00:00:00,150 --> 00:00:01,740
- At the beginning of
this course, we talked

2
00:00:01,740 --> 00:00:03,900
about the any type and
how it essentially means

3
00:00:03,900 --> 00:00:05,460
that this variable can be anything.

4
00:00:05,460 --> 00:00:07,170
TypeScript has no idea what it means

5
00:00:07,170 --> 00:00:08,820
and it essentially just
shuts off TypeScript

6
00:00:08,820 --> 00:00:10,500
for everything related to that variable.

7
00:00:10,500 --> 00:00:11,610
'Cause it doesn't know what it could be

8
00:00:11,610 --> 00:00:13,980
and it doesn't have any
type checking it can do.

9
00:00:13,980 --> 00:00:16,290
Well, there's another type in
TypeScript that's very similar

10
00:00:16,290 --> 00:00:19,020
to any where TypeScript
has no idea what it is.

11
00:00:19,020 --> 00:00:21,780
But instead of allowing you
to do anything that you want

12
00:00:21,780 --> 00:00:23,520
it restricts you and prevents you

13
00:00:23,520 --> 00:00:25,410
from doing anything with that variable

14
00:00:25,410 --> 00:00:28,470
until you narrow it down to
figure out what it actually is.

15
00:00:28,470 --> 00:00:30,660
And that type is the unknown type.

16
00:00:30,660 --> 00:00:32,820
If we come in here and
we type this as unknown

17
00:00:32,820 --> 00:00:34,290
you'll notice immediately when we try to

18
00:00:34,290 --> 00:00:37,350
use this data variable, you
can see the type is unknown.

19
00:00:37,350 --> 00:00:39,540
So we can't do anything with it at all.

20
00:00:39,540 --> 00:00:41,280
We need to use type narrowing.

21
00:00:41,280 --> 00:00:42,420
So if we want to check to see

22
00:00:42,420 --> 00:00:44,130
if this thing has a name property

23
00:00:44,130 --> 00:00:45,840
well what we can do is we can say, Hey

24
00:00:45,840 --> 00:00:49,350
if the type of our data
is equal to an object

25
00:00:49,350 --> 00:00:50,970
well we're one step of the way there.

26
00:00:50,970 --> 00:00:53,160
Now we need to check to see
if it has this name property.

27
00:00:53,160 --> 00:00:55,410
'Cause right now, if we
were to just put our code

28
00:00:55,410 --> 00:00:57,900
inside of here and clean up
all of our different errors

29
00:00:57,900 --> 00:01:00,030
you'll see that right now it's not working

30
00:01:00,030 --> 00:01:00,863
because it doesn't know

31
00:01:00,863 --> 00:01:03,330
if this name property
exists for our data object.

32
00:01:03,330 --> 00:01:04,350
Also, it could be null.

33
00:01:04,350 --> 00:01:05,610
So we need to check for that.

34
00:01:05,610 --> 00:01:08,830
So we can say if the
data is not equal to null

35
00:01:10,380 --> 00:01:11,280
we'll come in here like that.

36
00:01:11,280 --> 00:01:12,563
There we go.

37
00:01:12,563 --> 00:01:14,040
It's not equal to null
and the data is equal

38
00:01:14,040 --> 00:01:19,040
to an object and the data has
that particular key of name.

39
00:01:19,590 --> 00:01:21,690
So to make that check, we
can use the TypeScript check

40
00:01:21,690 --> 00:01:24,060
of name in data just like that.

41
00:01:24,060 --> 00:01:25,365
And that's just saying

42
00:01:25,365 --> 00:01:27,750
that there is a name key
inside of this data object.

43
00:01:27,750 --> 00:01:30,090
Now it knows that I have this data object

44
00:01:30,090 --> 00:01:32,430
which is a record that
has this name property

45
00:01:32,430 --> 00:01:34,320
and we don't know what
this name property is yet.

46
00:01:34,320 --> 00:01:36,330
If we wanted to, you know, do
more with this name property

47
00:01:36,330 --> 00:01:37,590
like determine that it's a string

48
00:01:37,590 --> 00:01:39,540
by logging out the length of it

49
00:01:39,540 --> 00:01:41,280
well we would have to add
in an additional check

50
00:01:41,280 --> 00:01:46,173
by checking that data.name
is the type of a string.

51
00:01:47,670 --> 00:01:48,503
There we go.

52
00:01:48,503 --> 00:01:49,336
So now we have a bunch

53
00:01:49,336 --> 00:01:50,850
of different checks to
essentially determine

54
00:01:50,850 --> 00:01:53,820
that this data object is an
object that has a name property

55
00:01:53,820 --> 00:01:54,990
which is a string.

56
00:01:54,990 --> 00:01:56,640
Now I know if you're used to JavaScript

57
00:01:56,640 --> 00:01:59,610
this is a whole lot of code
to essentially do nothing.

58
00:01:59,610 --> 00:02:02,580
But the reason we're doing
all this is for type safety.

59
00:02:02,580 --> 00:02:04,680
If you have a variable
in your TypeScript code

60
00:02:04,680 --> 00:02:07,230
and you don't know what the
type of that is, typing it

61
00:02:07,230 --> 00:02:10,020
as any and just ignoring
it is a surefire way to

62
00:02:10,020 --> 00:02:12,000
essentially go back to
your old ways of JavaScript

63
00:02:12,000 --> 00:02:14,130
and give up all of the
benefits of TypeScript

64
00:02:14,130 --> 00:02:16,770
because it only takes a couple
places where you use any

65
00:02:16,770 --> 00:02:18,990
for it to ruin your entire code base.

66
00:02:18,990 --> 00:02:20,820
Because just one section
that's not covered

67
00:02:20,820 --> 00:02:23,130
by TypeScript means you
can't trust pretty much any

68
00:02:23,130 --> 00:02:25,530
of your application that
touches that part of your code.

69
00:02:25,530 --> 00:02:26,820
A unknown, on the other hand

70
00:02:26,820 --> 00:02:28,320
requires a lot more upfront work

71
00:02:28,320 --> 00:02:29,730
because we don't know anything about it

72
00:02:29,730 --> 00:02:32,460
and TypeScript is incredibly
strict with unknown.

73
00:02:32,460 --> 00:02:34,470
So we have to do all of these
different checks to make sure

74
00:02:34,470 --> 00:02:36,870
that this thing is what
we expect it to be.

75
00:02:36,870 --> 00:02:38,760
But by doing all of
that, we're essentially

76
00:02:38,760 --> 00:02:41,160
forcing TypeScript to
learn what this thing is.

77
00:02:41,160 --> 00:02:43,320
So that way we still have
type safety everywhere

78
00:02:43,320 --> 00:02:44,310
in our code, even

79
00:02:44,310 --> 00:02:46,140
if we don't know what
something is right away.

80
00:02:46,140 --> 00:02:48,420
So for example, when you
fetch data from an API

81
00:02:48,420 --> 00:02:49,980
you may not know what that data is

82
00:02:49,980 --> 00:02:52,110
but by doing some simple
type checks like this

83
00:02:52,110 --> 00:02:53,730
you can figure out what
that data shape looks

84
00:02:53,730 --> 00:02:56,180
like and make sure it's
what you expect it to be.