- Now we've talked about a bunch of different ways
that you can create and modify types in TypeScript.
There's also a ton of built-in types in TypeScript
that allow you to really easily modify your existing types
and almost all of these heavily used generics.
Now if we take a look at this code,
you notice we have quite a bit of code,
but it's overall not too complicated.
We have two types.
One is a todo type that has an ID which is a string,
a name which is a string and a completed Boolean,
and then we have a new todo.
It's exactly the same as our todo,
it just doesn't have an ID
because obviously if we have a form
where we enter in the title for a todo,
it doesn't have an ID until we do something
like save it to the database.
Now I have a function for saving the todo.
This function you can just think about it as like,
saving to a database and we're getting back the ID
for the todo that we just created,
and now we're returning a brand new todo.
So this is actually returning a todo object,
itself that has the correct ID.
And this is taking in a new todo like this.
And it's going to be returning to us
a todo object just like that.
Now in order to make this work a little bit better,
we would essentially need to hear, return,
taking all of our todo properties,
and then the ID is going to be this crypto.random.
That is going to work just fine for us.
So essentially this is just saving it to our database.
You can imagine that's what this code does.
We're just emulating that by faking it.
And then we have this render todo function,
and this is going to create all the different
elements for our HTML page,
and most importantly it's setting the ID of our div
to the ID of our todo,
and then everything else is happening
to make it render on the page.
So obviously this render todo function needs an ID.
Now the problem with this code
is that we have a lot of duplicated stuff.
For example, if I take my todo
and I add a new property to it such as a status,
which is just, let's just make it a string for now,
you'll notice now we're getting errors
because here I'm not returning a status anywhere,
so obviously that's a big problem.
What do I need to do is make sure my new todo
also has this status property being applied on it
and now everything's gonna work.
So this is again a problem with duplication.
I had the same type in multiple places.
There's many different ways you can solve this problem.
One of them is that people will just make
this ID property optional.
They'll go ahead make ID optional, remove the new todo.
And now here we're just using a normal todo,
and here we're using a normal todo.
Now we have problems because I know that when I render todo
it's always going to have an ID.
But since I marked this as optional up here,
this is, you know, giving me an error,
because I know that there's supposed to be an ID here,
because I know when I call that it should have an ID,
but my type is saying that it's optional,
so I'm getting an error 'cause I'm trying
to assign something that can't be optional.
So this is a really bad solution
because I'm essentially lying to myself.
This is not actually optional, this is required.
It's only optional if I have a new todo.
So that's not the correct solution for this problem.
Instead we want to use the built-in types into TypeScript.
And the specific types I'm gonna be talking about
in this video are pick and omit,
which both can solve this problem.
So instead of creating a new todo
and manually hard coding everything,
I want to create it based on the types from our todo here.
So instead I can say that this is going to start out
as our todo type.
And now I want to change this
by omitting certain things or picking certain properties.
In my case, I'm gonna be starting with pick.
I'm gonna say, you know what?
I wanna pick only the specific properties
from todo that I care about.
So this is a generic function, or a generic type, I'm sorry.
And it takes the first property is the type
that you want to pick from, and the second property
are the things you want to pick out of it.
So these are all the different keys.
So in my case, I want to get the name,
and I want to get the status,
and I want to get the completed property.
So now this new todo is exactly the same as todo,
but it only has these three properties inside of it.
Now this is still not the best way to do this,
because really all I want to do is remove this ID property.
So instead I'm gonna be using omit instead of pick.
So here I'm gonna change this to omit,
and this is the exact opposite of pick.
All it does is remove all the properties I pass to it.
So here I want to remove the ID property from here.
And now you can see there's no more errors
in any of my code and everything's working perfectly fine.
This is a required property for my normal todos,
but for new todos you can see
that this property doesn't even exist,
'cause I omitted it from all the properties I care about.
So omit is really good if you wanna take one type
and just remove a few things from it to make it a new type.
And pick is really great
if you just wanna pick a couple things from a type
to use in another type.
For example, let's say I have a person type,
and this person type is really complicated,
they have a name, they have an ID.
Let's say they have an age.
And they have this really complex
like address type inside of here
which has a bunch of different information inside of it.
It doesn't really matter what this is,
we'll just put a bunch of stuff inside of there
for this address type.
And really all I want is a name and an age.
Well, I could just come in here and I could say,
I want to pick from the person just the name and the age,
and now you can see if I say simple person,
and I hover over this type,
you can see it just has those name and age properties
being assigned to it.
So this is the use cases for pick and omit.
These are things that you're probably going to use
quite often inside of your TypeScript code,
because generally it's better to have your types
always be a good source of truth.
So if I change my person type here,
by maybe changing my name to a number,
I don't know why I would do that, but if I did do that,
you can see down here this simple person
reflects that change.
And it's really good that you don't have
a bunch of duplicated code everywhere,
and pick and omit make it really easy
to fix those duplicated code problems.