- Now we're finally to probably the most important part
of TypeScript, which is how do you type objects?
For example, if I have a person object,
this person object is going to have a name,
an age, and so on.
So let's just say I have a name, which is Kyle,
and we'll do an age here, which is 28.
So I have a person that has a name and an age property.
How do we actually go about typing this specific person?
If I hover over this person object
you'll notice it actually does a good job
of giving me an inferred type.
It's saying since I've defined an object that has a name
and an age property and I've given them default values,
TypeScript is essentially saying, "Hey, you know what?
"Your person probably is going to have a name,
"which is a string, and an age, which is a number."
It already does really good inference
on what my person should look like, but sometimes
my person object should have other properties
that aren't actually defined in my default value.
For example, later on I may want to say
person.isProgrammer equals true
and now I'm going to get an error
because this isProgrammer is not in my person object type.
And that's one important thing to understand
about TypeScript.
When you're typing an object
if you don't include a property in your type, for example,
this does not have an isProgrammer property,
it's going to throw an error anytime you try to access
or set that property.
So what we need to do is we need to manually type this
to tell it, okay, this is something that has a name
which is a string, and age, which is going to be a number,
and it's going to have this isProgrammer variable,
which actually could be optional.
For now, we're gonna not worry
about this optional thing part,
we're just gonna type this out as is.
The way that we do that
is just our normal colon syntax here,
followed by some object curly braces
and then essentially we write it like a normal object.
For example, I'm gonna say name here,
but instead of giving a default value, I give it a type,
which in our case is going to be string.
Same thing for the age.
I'm gonna come in here,
I'm gonna say age is going to be a number, just like that.
The important thing is,
is you need to make sure you separate these
by a semicolon, and that's how it's going to determine
which one is separated by what.
If I came in here with a comma, that could work as well.
Either one is going to work just fine
or I could even use a new line to separate them.
It doesn't matter as long as you use a semicolon, a comma,
or a new line, all of those are gonna work.
So now if I save, you can see
it's automatically formatting this
with the semicolon syntax.
I'm getting the exact same type right here.
Now, if I wanted to make it so this isProgrammer property
is going to be actually optional on the thing,
what I could do is I could say isProgrammer,
I'm gonna set that to a Boolean 'cause I know
that this is going to be a Boolean,
but now I'm actually getting an error.
The reason for that is because my person
doesn't have an isProgrammer property on it
because it expects an isProgrammer property
to be either true or false.
That's another important thing to understand about objects,
when you define a value for a property,
for example, isProgrammer is a Boolean,
that means that all objects must have that property.
So this has to say isProgrammer
is either equal to false or true,
otherwise it's going to throw me an error.
But obviously I don't want that.
I want it to just be able to be optional
because I want some people to have this property
and some people not to.
In that case, all you need to do is take your property name
and add a question mark to the end of it.
That means that this is going to be an optional property.
Essentially it can either be a Boolean
or it can be undefined.
And if we hover over that, you can actually explicitly see,
it says boolean or undefined.
That's what this question mark syntax is doing right here.
So now I could define this variable here if I want
and it's going to work just fine,
or I could leave it off and define it later,
it's going to work fine.
Or I could just not even define it at all.
And again, it's going to work just fine.
Now, this right here is just the very bare bones basics
of how you type out an object,
but obviously as your object starts to get more complex,
or if you have nested objects,
doing this all inline like this is really difficult to read
and understand, which is why in the next video
I'm gonna be talking about types and interfaces
as well as the difference between the two,
which is essentially how you take these long types
and extract them out into things
that you can reuse across your entire codebase.