Let's dig deeper into the core types typescript supports the next time that's interesting is the object
type.
Now you know objects in javascript they look like this you have curly braces and then you have key value
pairs in there and such values would all be treated as object types in typescript.
So any jobs would object is of type object though I will already say there are more specific versions
of objects in typescript so that you can say this is not just any object.
Does this object which has to has these properties or which has to be based on this or that constructor
function.
But we'll get there step by step to dive into objects.
I'll first of all rename apt yes here and I'll rename this to basics T S here and add a new app.
Yes file which will then overwrite the old app Jay has followed once we compile it where we can now
dive into objects and let's start by creating a basic object here.
Let's say a person with curly braces here and we give this a name here I'll go with Maximilian because
that is my name and the age of 30.
Now of course we can console lock person here and if we do so and we compiled is unsurprisingly we should
see that object being printed here in the console.
Now what we also can do in Javascript is we can try to access let's say nickname a property which does
not exist here.
Now you immediately see the typescript is not too happy about that and hence my idea tells me it tells
me that property nickname does not exist on that type.
So if we save that and I try to compile it we indeed get that same error down there to typescript compiler
does not like this and it tells me that we have no nickname property on this object.
It finds out that we don't have this nickname property because if we hover over person it inferred we
can see there is a colon after person so often the variable or constant name it inferred that this is
the type of data which is stored in there.
Note it's not just object.
As you can tell that is a concrete object.
It's the object with a name key where then to type and turn has to be a string and the H key where the
type has to be No.
And actually this can be confusing here.
This here obviously looks like a javascript object.
Curly braces key value pairs Well the first important thing to see here is that we have a semicolon
here after each line.
We don't have that in a javascript object with a comma here.
And indeed this is not a javascript object here which is created somewhere.
This is the object type inferred by TypeScript and object types are written almost like objects.
But of course we don't have key value pairs there but key type pairs object types are dear to describe
well the type of object that is getting used somewhere.
We could be more generic I could explicitly assign a type here to the constant of Object object is one
of the built in types.
Just like number and string and now if a hover over does we see persons of type object and now typescript
really only cares about the fact that this object type now is still if we compiled is we get that error
though because typescript still analyzes our code and sees that we try to access something which doesn't
exist there.
But it's important to understand that it all starts with this most generic Object type but often you
want to be more specific than that.
You don't just want to work with that generic Object type.
You really want to get the full support.
For example right now if I had a dot here and I have a look at my auto completion I get no help there
at all.
My I.D. reason for data is that all we tell the idea is that we have a value here in person which is
of type object.
Indeed now we actually also get an error if I tried to access name name exists here right.
But what we tell typescript here is that we just have an object where we don't give any our information
to typescript.
So actually typescript doesn't support any type of property because we don't tell it anything about
the object.
So we should be more specific and we are more specific by setting a specific object type the thing which
types could also inferred automatically.
We do this by adding curly braces here often to colon after our concept or a variable name.
So this here does not create a new javascript object.
This will actually be stripped out of the compile javascript code instead.
Does this just type scripts notation of specialized object type so to say so all the object type where
we provide some information about the structure of the object.
Now by assigning just an empty pair of curly braces as a type we essentially do the same as with object
we tell typescript that this is some object.
Now we can be more specific though we can add key value entries here.
However not key value but key type instead.
So here we could say the object would should be stored in person should have a name property and the
value of that name property should be of type String.
So here we describe the type of value which will eventually be stored in name.
Now by the way you see I'm getting an error here because what I'm telling typescript now is that my
person should have an object with exactly one key value pair where the key is name and the value of
that key string.
But we DNA sign an object with two key value pairs name which holds a string that is fine but age which
holds a number.
And that would not be fine.
So here we have to adjust this by adding a semicolon and then adding a number key value pair here where
we say age should be of type number so not 30 year.
That actually would be supported in typescript that we restricted to one specific number but then we'll
run into issues as soon as we change that.
Instead here I just want to say age should be some number and now we basically are explicitly assigning
the same typescript inferred before as you learned.
That's not a good practice but to understand object types that wanted to do it here still this is something
you can do.
It's better to let typescript infer it is as we did before like this.
Now just to show something interesting.
If I switch back to these sub optimal code where we explicitly assign a type typescript would be able
to infer if we compile this code of course it works.
We can access the name property but if we didn't have a look at aptly as we see this type assignment
is removed here and that of course should be something expected.
As I mentioned types and type assignments are not part of JavaScript they're typescript only.
I just wondered you showed us again to make it really clear that this syntax here is not creating some
javascript object which is somewhere in our code.
Does this just type scripts representation of an object type that helps typescript understand the objects
you're working with the better syntax of course.
Is this in Texas you learned.