1
00:00:00,120 --> 00:00:02,310
- Now we've talked about
a bunch of different ways

2
00:00:02,310 --> 00:00:05,310
that you can create and
modify types in TypeScript.

3
00:00:05,310 --> 00:00:08,100
There's also a ton of
built-in types in TypeScript

4
00:00:08,100 --> 00:00:11,040
that allow you to really easily
modify your existing types

5
00:00:11,040 --> 00:00:13,980
and almost all of these
heavily used generics.

6
00:00:13,980 --> 00:00:15,000
Now if we take a look at this code,

7
00:00:15,000 --> 00:00:16,170
you notice we have quite a bit of code,

8
00:00:16,170 --> 00:00:17,940
but it's overall not too complicated.

9
00:00:17,940 --> 00:00:18,990
We have two types.

10
00:00:18,990 --> 00:00:21,630
One is a todo type that has
an ID which is a string,

11
00:00:21,630 --> 00:00:23,880
a name which is a string
and a completed Boolean,

12
00:00:23,880 --> 00:00:25,140
and then we have a new todo.

13
00:00:25,140 --> 00:00:26,550
It's exactly the same as our todo,

14
00:00:26,550 --> 00:00:27,600
it just doesn't have an ID

15
00:00:27,600 --> 00:00:29,520
because obviously if we have a form

16
00:00:29,520 --> 00:00:31,620
where we enter in the title for a todo,

17
00:00:31,620 --> 00:00:33,390
it doesn't have an ID
until we do something

18
00:00:33,390 --> 00:00:35,250
like save it to the database.

19
00:00:35,250 --> 00:00:37,200
Now I have a function for saving the todo.

20
00:00:37,200 --> 00:00:38,910
This function you can just
think about it as like,

21
00:00:38,910 --> 00:00:40,980
saving to a database and
we're getting back the ID

22
00:00:40,980 --> 00:00:42,510
for the todo that we just created,

23
00:00:42,510 --> 00:00:44,250
and now we're returning a brand new todo.

24
00:00:44,250 --> 00:00:46,350
So this is actually
returning a todo object,

25
00:00:46,350 --> 00:00:48,420
itself that has the correct ID.

26
00:00:48,420 --> 00:00:51,420
And this is taking in
a new todo like this.

27
00:00:51,420 --> 00:00:53,850
And it's going to be returning to us

28
00:00:53,850 --> 00:00:55,920
a todo object just like that.

29
00:00:55,920 --> 00:00:57,930
Now in order to make this
work a little bit better,

30
00:00:57,930 --> 00:01:00,120
we would essentially need to hear, return,

31
00:01:00,120 --> 00:01:03,270
taking all of our todo properties,

32
00:01:03,270 --> 00:01:06,840
and then the ID is going
to be this crypto.random.

33
00:01:06,840 --> 00:01:08,370
That is going to work just fine for us.

34
00:01:08,370 --> 00:01:10,440
So essentially this is just
saving it to our database.

35
00:01:10,440 --> 00:01:12,180
You can imagine that's
what this code does.

36
00:01:12,180 --> 00:01:14,250
We're just emulating that by faking it.

37
00:01:14,250 --> 00:01:15,990
And then we have this
render todo function,

38
00:01:15,990 --> 00:01:17,430
and this is going to
create all the different

39
00:01:17,430 --> 00:01:18,660
elements for our HTML page,

40
00:01:18,660 --> 00:01:21,030
and most importantly it's
setting the ID of our div

41
00:01:21,030 --> 00:01:22,230
to the ID of our todo,

42
00:01:22,230 --> 00:01:23,520
and then everything else is happening

43
00:01:23,520 --> 00:01:24,990
to make it render on the page.

44
00:01:24,990 --> 00:01:27,810
So obviously this render
todo function needs an ID.

45
00:01:27,810 --> 00:01:29,280
Now the problem with this code

46
00:01:29,280 --> 00:01:30,990
is that we have a lot of duplicated stuff.

47
00:01:30,990 --> 00:01:32,430
For example, if I take my todo

48
00:01:32,430 --> 00:01:35,760
and I add a new property
to it such as a status,

49
00:01:35,760 --> 00:01:37,650
which is just, let's just
make it a string for now,

50
00:01:37,650 --> 00:01:38,940
you'll notice now we're getting errors

51
00:01:38,940 --> 00:01:41,700
because here I'm not
returning a status anywhere,

52
00:01:41,700 --> 00:01:44,160
so obviously that's a big problem.

53
00:01:44,160 --> 00:01:46,230
What do I need to do is
make sure my new todo

54
00:01:46,230 --> 00:01:48,900
also has this status
property being applied on it

55
00:01:48,900 --> 00:01:50,280
and now everything's gonna work.

56
00:01:50,280 --> 00:01:52,020
So this is again a
problem with duplication.

57
00:01:52,020 --> 00:01:54,390
I had the same type in multiple places.

58
00:01:54,390 --> 00:01:56,610
There's many different ways
you can solve this problem.

59
00:01:56,610 --> 00:01:58,350
One of them is that people will just make

60
00:01:58,350 --> 00:02:00,270
this ID property optional.

61
00:02:00,270 --> 00:02:02,790
They'll go ahead make ID
optional, remove the new todo.

62
00:02:02,790 --> 00:02:05,070
And now here we're just
using a normal todo,

63
00:02:05,070 --> 00:02:06,930
and here we're using a normal todo.

64
00:02:06,930 --> 00:02:10,050
Now we have problems because
I know that when I render todo

65
00:02:10,050 --> 00:02:12,180
it's always going to have an ID.

66
00:02:12,180 --> 00:02:14,610
But since I marked this
as optional up here,

67
00:02:14,610 --> 00:02:15,930
this is, you know, giving me an error,

68
00:02:15,930 --> 00:02:18,120
because I know that there's
supposed to be an ID here,

69
00:02:18,120 --> 00:02:20,250
because I know when I call
that it should have an ID,

70
00:02:20,250 --> 00:02:22,230
but my type is saying that it's optional,

71
00:02:22,230 --> 00:02:23,520
so I'm getting an error 'cause I'm trying

72
00:02:23,520 --> 00:02:25,680
to assign something
that can't be optional.

73
00:02:25,680 --> 00:02:27,060
So this is a really bad solution

74
00:02:27,060 --> 00:02:28,770
because I'm essentially lying to myself.

75
00:02:28,770 --> 00:02:30,900
This is not actually
optional, this is required.

76
00:02:30,900 --> 00:02:32,880
It's only optional if I have a new todo.

77
00:02:32,880 --> 00:02:35,280
So that's not the correct
solution for this problem.

78
00:02:35,280 --> 00:02:38,400
Instead we want to use the
built-in types into TypeScript.

79
00:02:38,400 --> 00:02:40,110
And the specific types
I'm gonna be talking about

80
00:02:40,110 --> 00:02:41,670
in this video are pick and omit,

81
00:02:41,670 --> 00:02:43,590
which both can solve this problem.

82
00:02:43,590 --> 00:02:45,180
So instead of creating a new todo

83
00:02:45,180 --> 00:02:46,770
and manually hard coding everything,

84
00:02:46,770 --> 00:02:49,740
I want to create it based on
the types from our todo here.

85
00:02:49,740 --> 00:02:52,110
So instead I can say that
this is going to start out

86
00:02:52,110 --> 00:02:53,100
as our todo type.

87
00:02:53,100 --> 00:02:54,450
And now I want to change this

88
00:02:54,450 --> 00:02:57,540
by omitting certain things or
picking certain properties.

89
00:02:57,540 --> 00:02:59,730
In my case, I'm gonna
be starting with pick.

90
00:02:59,730 --> 00:03:00,563
I'm gonna say, you know what?

91
00:03:00,563 --> 00:03:02,550
I wanna pick only the specific properties

92
00:03:02,550 --> 00:03:03,690
from todo that I care about.

93
00:03:03,690 --> 00:03:06,660
So this is a generic function,
or a generic type, I'm sorry.

94
00:03:06,660 --> 00:03:08,310
And it takes the first
property is the type

95
00:03:08,310 --> 00:03:10,620
that you want to pick from,
and the second property

96
00:03:10,620 --> 00:03:12,030
are the things you want to pick out of it.

97
00:03:12,030 --> 00:03:13,560
So these are all the different keys.

98
00:03:13,560 --> 00:03:15,720
So in my case, I want to get the name,

99
00:03:15,720 --> 00:03:17,880
and I want to get the status,

100
00:03:17,880 --> 00:03:19,980
and I want to get the completed property.

101
00:03:19,980 --> 00:03:22,830
So now this new todo is
exactly the same as todo,

102
00:03:22,830 --> 00:03:26,400
but it only has these three
properties inside of it.

103
00:03:26,400 --> 00:03:28,260
Now this is still not
the best way to do this,

104
00:03:28,260 --> 00:03:31,530
because really all I want to
do is remove this ID property.

105
00:03:31,530 --> 00:03:34,200
So instead I'm gonna be
using omit instead of pick.

106
00:03:34,200 --> 00:03:35,850
So here I'm gonna change this to omit,

107
00:03:35,850 --> 00:03:37,290
and this is the exact opposite of pick.

108
00:03:37,290 --> 00:03:40,110
All it does is remove all
the properties I pass to it.

109
00:03:40,110 --> 00:03:43,170
So here I want to remove
the ID property from here.

110
00:03:43,170 --> 00:03:44,820
And now you can see there's no more errors

111
00:03:44,820 --> 00:03:47,490
in any of my code and everything's
working perfectly fine.

112
00:03:47,490 --> 00:03:49,920
This is a required property
for my normal todos,

113
00:03:49,920 --> 00:03:51,270
but for new todos you can see

114
00:03:51,270 --> 00:03:52,830
that this property doesn't even exist,

115
00:03:52,830 --> 00:03:55,650
'cause I omitted it from all
the properties I care about.

116
00:03:55,650 --> 00:03:57,840
So omit is really good if
you wanna take one type

117
00:03:57,840 --> 00:04:00,660
and just remove a few things
from it to make it a new type.

118
00:04:00,660 --> 00:04:01,650
And pick is really great

119
00:04:01,650 --> 00:04:03,630
if you just wanna pick a
couple things from a type

120
00:04:03,630 --> 00:04:05,070
to use in another type.

121
00:04:05,070 --> 00:04:06,930
For example, let's say
I have a person type,

122
00:04:06,930 --> 00:04:08,370
and this person type
is really complicated,

123
00:04:08,370 --> 00:04:10,350
they have a name, they have an ID.

124
00:04:10,350 --> 00:04:12,210
Let's say they have an age.

125
00:04:12,210 --> 00:04:13,530
And they have this really complex

126
00:04:13,530 --> 00:04:15,300
like address type inside of here

127
00:04:15,300 --> 00:04:17,390
which has a bunch of different
information inside of it.

128
00:04:17,390 --> 00:04:18,900
It doesn't really matter what this is,

129
00:04:18,900 --> 00:04:20,970
we'll just put a bunch
of stuff inside of there

130
00:04:20,970 --> 00:04:22,624
for this address type.

131
00:04:22,624 --> 00:04:23,850
And really all I want
is a name and an age.

132
00:04:23,850 --> 00:04:25,920
Well, I could just come
in here and I could say,

133
00:04:25,920 --> 00:04:30,920
I want to pick from the person
just the name and the age,

134
00:04:31,410 --> 00:04:35,400
and now you can see if
I say simple person,

135
00:04:35,400 --> 00:04:36,270
and I hover over this type,

136
00:04:36,270 --> 00:04:38,850
you can see it just has
those name and age properties

137
00:04:38,850 --> 00:04:39,870
being assigned to it.

138
00:04:39,870 --> 00:04:42,090
So this is the use
cases for pick and omit.

139
00:04:42,090 --> 00:04:43,470
These are things that
you're probably going to use

140
00:04:43,470 --> 00:04:45,330
quite often inside of
your TypeScript code,

141
00:04:45,330 --> 00:04:47,940
because generally it's
better to have your types

142
00:04:47,940 --> 00:04:49,830
always be a good source of truth.

143
00:04:49,830 --> 00:04:51,810
So if I change my person type here,

144
00:04:51,810 --> 00:04:53,850
by maybe changing my name to a number,

145
00:04:53,850 --> 00:04:55,770
I don't know why I would do
that, but if I did do that,

146
00:04:55,770 --> 00:04:57,390
you can see down here this simple person

147
00:04:57,390 --> 00:04:58,800
reflects that change.

148
00:04:58,800 --> 00:04:59,850
And it's really good that you don't have

149
00:04:59,850 --> 00:05:01,710
a bunch of duplicated code everywhere,

150
00:05:01,710 --> 00:05:03,300
and pick and omit make it really easy

151
00:05:03,300 --> 00:05:05,553
to fix those duplicated code problems.