1
00:00:00,150 --> 00:00:02,640
- Now we're finally to probably
the most important part

2
00:00:02,640 --> 00:00:05,580
of TypeScript, which is
how do you type objects?

3
00:00:05,580 --> 00:00:07,620
For example, if I have a person object,

4
00:00:07,620 --> 00:00:09,380
this person object is
going to have a name,

5
00:00:09,380 --> 00:00:10,440
an age, and so on.

6
00:00:10,440 --> 00:00:12,903
So let's just say I have
a name, which is Kyle,

7
00:00:14,340 --> 00:00:16,830
and we'll do an age here, which is 28.

8
00:00:16,830 --> 00:00:19,080
So I have a person that has
a name and an age property.

9
00:00:19,080 --> 00:00:21,840
How do we actually go about
typing this specific person?

10
00:00:21,840 --> 00:00:23,130
If I hover over this person object

11
00:00:23,130 --> 00:00:24,600
you'll notice it actually does a good job

12
00:00:24,600 --> 00:00:26,280
of giving me an inferred type.

13
00:00:26,280 --> 00:00:28,470
It's saying since I've defined
an object that has a name

14
00:00:28,470 --> 00:00:30,900
and an age property and I've
given them default values,

15
00:00:30,900 --> 00:00:32,677
TypeScript is essentially
saying, "Hey, you know what?

16
00:00:32,677 --> 00:00:34,507
"Your person probably
is going to have a name,

17
00:00:34,507 --> 00:00:36,840
"which is a string, and an
age, which is a number."

18
00:00:36,840 --> 00:00:38,670
It already does really good inference

19
00:00:38,670 --> 00:00:41,460
on what my person should
look like, but sometimes

20
00:00:41,460 --> 00:00:43,620
my person object should
have other properties

21
00:00:43,620 --> 00:00:46,230
that aren't actually
defined in my default value.

22
00:00:46,230 --> 00:00:47,880
For example, later on I may want to say

23
00:00:47,880 --> 00:00:51,030
person.isProgrammer equals true

24
00:00:51,030 --> 00:00:51,990
and now I'm going to get an error

25
00:00:51,990 --> 00:00:55,770
because this isProgrammer is
not in my person object type.

26
00:00:55,770 --> 00:00:57,090
And that's one important
thing to understand

27
00:00:57,090 --> 00:00:57,923
about TypeScript.

28
00:00:57,923 --> 00:00:59,130
When you're typing an object

29
00:00:59,130 --> 00:01:01,860
if you don't include a property
in your type, for example,

30
00:01:01,860 --> 00:01:04,170
this does not have an
isProgrammer property,

31
00:01:04,170 --> 00:01:06,690
it's going to throw an error
anytime you try to access

32
00:01:06,690 --> 00:01:08,250
or set that property.

33
00:01:08,250 --> 00:01:10,650
So what we need to do is we
need to manually type this

34
00:01:10,650 --> 00:01:12,480
to tell it, okay, this is
something that has a name

35
00:01:12,480 --> 00:01:15,090
which is a string, and age,
which is going to be a number,

36
00:01:15,090 --> 00:01:17,280
and it's going to have
this isProgrammer variable,

37
00:01:17,280 --> 00:01:19,140
which actually could be optional.

38
00:01:19,140 --> 00:01:20,130
For now, we're gonna not worry

39
00:01:20,130 --> 00:01:21,330
about this optional thing part,

40
00:01:21,330 --> 00:01:23,580
we're just gonna type this out as is.

41
00:01:23,580 --> 00:01:24,540
The way that we do that

42
00:01:24,540 --> 00:01:26,640
is just our normal colon syntax here,

43
00:01:26,640 --> 00:01:28,440
followed by some object curly braces

44
00:01:28,440 --> 00:01:30,600
and then essentially we write
it like a normal object.

45
00:01:30,600 --> 00:01:32,070
For example, I'm gonna say name here,

46
00:01:32,070 --> 00:01:34,380
but instead of giving a default
value, I give it a type,

47
00:01:34,380 --> 00:01:36,150
which in our case is going to be string.

48
00:01:36,150 --> 00:01:37,530
Same thing for the age.

49
00:01:37,530 --> 00:01:38,363
I'm gonna come in here,

50
00:01:38,363 --> 00:01:41,610
I'm gonna say age is going to
be a number, just like that.

51
00:01:41,610 --> 00:01:42,450
The important thing is,

52
00:01:42,450 --> 00:01:43,950
is you need to make
sure you separate these

53
00:01:43,950 --> 00:01:46,620
by a semicolon, and that's
how it's going to determine

54
00:01:46,620 --> 00:01:48,080
which one is separated by what.

55
00:01:48,080 --> 00:01:50,460
If I came in here with a
comma, that could work as well.

56
00:01:50,460 --> 00:01:51,930
Either one is going to work just fine

57
00:01:51,930 --> 00:01:54,120
or I could even use a new
line to separate them.

58
00:01:54,120 --> 00:01:56,610
It doesn't matter as long as
you use a semicolon, a comma,

59
00:01:56,610 --> 00:01:58,650
or a new line, all of
those are gonna work.

60
00:01:58,650 --> 00:01:59,580
So now if I save, you can see

61
00:01:59,580 --> 00:02:00,930
it's automatically formatting this

62
00:02:00,930 --> 00:02:02,610
with the semicolon syntax.

63
00:02:02,610 --> 00:02:04,473
I'm getting the exact
same type right here.

64
00:02:04,473 --> 00:02:07,200
Now, if I wanted to make it
so this isProgrammer property

65
00:02:07,200 --> 00:02:09,870
is going to be actually
optional on the thing,

66
00:02:09,870 --> 00:02:12,750
what I could do is I
could say isProgrammer,

67
00:02:12,750 --> 00:02:14,400
I'm gonna set that to
a Boolean 'cause I know

68
00:02:14,400 --> 00:02:15,840
that this is going to be a Boolean,

69
00:02:15,840 --> 00:02:17,490
but now I'm actually getting an error.

70
00:02:17,490 --> 00:02:19,380
The reason for that is because my person

71
00:02:19,380 --> 00:02:21,810
doesn't have an
isProgrammer property on it

72
00:02:21,810 --> 00:02:23,700
because it expects an
isProgrammer property

73
00:02:23,700 --> 00:02:25,230
to be either true or false.

74
00:02:25,230 --> 00:02:27,570
That's another important thing
to understand about objects,

75
00:02:27,570 --> 00:02:29,670
when you define a value for a property,

76
00:02:29,670 --> 00:02:31,680
for example, isProgrammer is a Boolean,

77
00:02:31,680 --> 00:02:34,680
that means that all objects
must have that property.

78
00:02:34,680 --> 00:02:37,020
So this has to say isProgrammer

79
00:02:37,020 --> 00:02:39,300
is either equal to false or true,

80
00:02:39,300 --> 00:02:41,310
otherwise it's going to throw me an error.

81
00:02:41,310 --> 00:02:42,570
But obviously I don't want that.

82
00:02:42,570 --> 00:02:44,250
I want it to just be able to be optional

83
00:02:44,250 --> 00:02:46,320
because I want some people
to have this property

84
00:02:46,320 --> 00:02:47,970
and some people not to.

85
00:02:47,970 --> 00:02:50,490
In that case, all you need to
do is take your property name

86
00:02:50,490 --> 00:02:52,350
and add a question mark to the end of it.

87
00:02:52,350 --> 00:02:54,570
That means that this is going
to be an optional property.

88
00:02:54,570 --> 00:02:56,250
Essentially it can either be a Boolean

89
00:02:56,250 --> 00:02:57,840
or it can be undefined.

90
00:02:57,840 --> 00:02:59,790
And if we hover over that, you
can actually explicitly see,

91
00:02:59,790 --> 00:03:01,710
it says boolean or undefined.

92
00:03:01,710 --> 00:03:04,260
That's what this question mark
syntax is doing right here.

93
00:03:04,260 --> 00:03:06,810
So now I could define this
variable here if I want

94
00:03:06,810 --> 00:03:08,220
and it's going to work just fine,

95
00:03:08,220 --> 00:03:09,960
or I could leave it off
and define it later,

96
00:03:09,960 --> 00:03:10,830
it's going to work fine.

97
00:03:10,830 --> 00:03:12,570
Or I could just not even define it at all.

98
00:03:12,570 --> 00:03:14,880
And again, it's going to work just fine.

99
00:03:14,880 --> 00:03:17,310
Now, this right here is just
the very bare bones basics

100
00:03:17,310 --> 00:03:18,840
of how you type out an object,

101
00:03:18,840 --> 00:03:21,210
but obviously as your object
starts to get more complex,

102
00:03:21,210 --> 00:03:22,710
or if you have nested objects,

103
00:03:22,710 --> 00:03:25,740
doing this all inline like this
is really difficult to read

104
00:03:25,740 --> 00:03:28,650
and understand, which
is why in the next video

105
00:03:28,650 --> 00:03:30,990
I'm gonna be talking
about types and interfaces

106
00:03:30,990 --> 00:03:32,400
as well as the difference between the two,

107
00:03:32,400 --> 00:03:34,770
which is essentially how
you take these long types

108
00:03:34,770 --> 00:03:36,300
and extract them out into things

109
00:03:36,300 --> 00:03:38,650
that you can reuse across
your entire codebase.