TypeScript objects offer enhanced type safety compared to JavaScript by inferring or explicitly defining expected properties and their types, preventing runtime errors related to unknown properties or incorrect data types.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
object is another data type in
typescript which we also have in
JavaScript but the typescript objects
are a little bit different from the
JavaScript objects so in this lecture
let's learn about typescript
objects so just like how we create an
object in JavaScript in the same way in
typescript also we create the object for
example let's first create a variable
let's call it person and to this we are
going to assign an object and in an
object we have key value payers so for
example the person is going to have a
name let's say name is
John and the person is also going to
have an age let's say the current age is
30 so this is how we create an object in
JavaScript and in the same way we also
create the object in
typescript but in JavaScript so for
example correctly to this person we have
assigned this object where we have name
and age property but in JavaScript
letter we can go ahead and we can
reassign this person object with some
other object where we will have a name
let's say Mark we will have an age let's
say 32 so till here you see in
typescript we are not getting any error
but as soon as I add one more property
for example
gender let's say gender is male you will
see that we have an error
here if I hover over this error it says
object literal may only specify known
properties and gender does not exist in
type this object now why do we have this
error we have this error because if I
hover over this person this person
variable you will see that this person
variable is assigned with an object now
this object here is not actually an
object instead it is a type so basically
here typescript has inferred a type for
this person variable and what is the
type the type is this person should be
an object and in that object we should
have name and age property so this is
the type for this person variable all
right so here when we assigning an
object there we have name and age
property it matches this type so that's
why here we don't have any error and
this type has been inferred because here
when we are initializing it with some
initial value there we only have name
and age property so based on this object
the type of this person variable has
been inferred and types script has
inferred its type as an object where we
should have a name and age property
letter when we are trying to reassign
this person with another object where we
also have this gender property this
structure does not match this type so in
this type we have only name and age
property but here when we are trying to
assign this person person with this
object where we also have a gender
property we are getting this error that
gender is not a known
property now if we go ahead and if we
add gender property also and let's say
gender is female so now the type of this
person will be inferred as an object and
in that object it is expecting name age
and gender property and now this object
which we are reassigning to this person
variable there we have name age and
gender property so this object
matches this type here and that's why
now we don't have any error but if I
remove this gender property in that case
this type this object will not match
this type because here it is also
expecting a gender property so that's
right now we have an error so in case of
object also typescript is doing type
inference but if we want we can also
specify the type for this person object
explicitly so for example here I can go
ahead and I can specify the type of this
person as object and when we specify the
type of the person as object in that
case we can specify any type of object
to this person variable so you see
initially we are assigning an object
where we have name age agender and then
later we are reassigning it with an
object where we only have name and age
and we don't have any error we can also
specify the type as this where we are
not specifying any property in that case
also we are not getting any error so
this here and object these two are same
thing but we can also explicitly specify
the type of this person for that after
this variable name we can use a colon
like this then we use a set of curly
braces and there we specify the property
name and its type so for example to this
person we want to assign only those
objects which has a name property and
name should be a string value
and which has an age property and AG
should be a number value so
now to this person now we can only
assign those objects which matches this
type which has a name property and it is
storing a string value and which has
this age property which is storing a
numeric value so here you see this
object does not match this type which we
are explicitly specifying and that's why
we have this error the gender is not a known
known
property and if I remove this gender in
that case we will not have any error and
letter also when we are trying to assign
an object here there also we only have
name and age property and this matches
this type which we are specifying here
and that's why we are not getting any
error here as
well okay so we can also specify the
type for this person the type of the
object which we want to assign to this
person variable table like
this but if we don't explicitly specify
this and when we initialize this person
with an object so here we are doing the
initialization based on this
initialization typescript will infer the
type of this person as you can see here
so it has inferred this type it is an
object where we should have a name
property and age property in the name
property we should be having a string
value and in the age property we should
be having a number
value so here when we are reassigning
this person with this object where we
have the name and age property if I
change this age to string 32 we will
have an error because if you see the
type here there for the age property it
is expecting a numeric value but here we
are assigning a string value and that's
why we have this error it says type
string is not assignable to type
number so both the property name and and
the type of value which we are storing
in that property is
important now let me remove this line
from here and let me write a console.log
statement and let's go ahead and let's
log this person
object let's save the file here let's
compile this .ts
file and you can see that the person
object has been logged there we have the
name property and age property and if I
try to access let's say the name
property of the person object that also
we can do so let's save this file again
let's compile this app. TS
file and you see now the value of name
property of person object has been
logged here but here if I try to access
a property which does not exist on this
person object for example gender
typescript will quickly give us an error
but in JavaScript when we try to log
person. gender it will not give us any
error even though this gender property
does not exist on this person object
JavaScript will not throw any error and
when we will log a property which does
not exist on that object it is going to
log undefined same is the case here as
well if we compile this typescript code
it will compile successfully and in the
JavaScript we will see that we are
logging person. gender so let me
actually show you that let's save this
and let's again compile this app. TS
file so you see first of all in
typescript we are getting this error if
I scroll
up we have one error and what is the
error you can see we have an error at
this line person. gender and you can
also see the error that property gender
does not exist on type this type so
while compiling also we are getting the
error but the file this app dots file it
will still get compiled into JavaScript
code because in JavaScript this is not
here you see here we have the same code
and there when we are trying to log
person. gender we don't have any error
here even though this gender property
does not exist on this person object we
do not see any error here so when we
will run this program it is going to log
undefined in the console as you can already
already
see so in JavaScript we are not getting any
any
error but in typescript we are getting
an error
but if I set the type of this person as
object in that case to this person we
can assign any type of object in that
object we can have any properties and we
saw that with an example previously but
still we are getting this error for this
gender now this error is because now on
this person if I try to access name
property in that case also we will get
this error because here we are
specifying that this person is object
but that object has which properties
that we have not specified right this
object type does not tell what
properties this person object is going
to have so typescript also does not know
whether this person has this name
property or not and that's why it is
throwing this error same is the case
when we use this curly braces in that
case also same thing is going to happen
here we are not specifying what
properties this person object is going
to have so typescript does not know if
this person object has this name
property or not and that's that's why it
is throwing an error but if we don't
specify the type here explicitly in that
case based on the initial value which we
have assigned to this person typescript
is going to infer a type for this person
variable so this person variable is
going to be an object which should have
this name and age property name should
be string and AG should be number so
based on that it has assigned a type to
this person variable and in that type in
that object we have the name property so
that's why now we are not getting any
error but if I try to access a property
which does not exist for example gender
then we will get an error so this is
another very important point to
remember and finally in JavaScript we
can access a property on an object using
square bracket notation also so let's
see if we can do the same thing in
typescript also so what I want is from
the person object I want to access its
age property but this time I want to use
square bracket
notation okay if I save the
changes let's compile the code again for
that we need to run TSC app. TS so the
code has been compiled and as you can
see when we are logging person. name it
is logging the value of name property
which is John and when we are using the
square bracket notation where we want to
log the value of age property there it
is logging 30 so we can also use square
bracket notation in typescript
also and finally let's also learn how we
can specify a type explicitly for an
object when we have nested objects for
example inside this person let's say I
also have an address property and this
address is going to be a nested object
in there I have the city property which
is going to store a string value let's
say London and I'm going to have a
country property which is again going to
store a string value and let's say
country is UK so when we have nested
objects how we can specify the type of
that object
explicitly for that again whenever we
want to specify a type for a variable or
for a parameter first of all after that
variable or after that parameter we need
to use a colon and here we want to
specify the type of this person so
basically in this person variable we
want to store an object in that object
we want to have have a name property
which should be a
string and then let's use semicolon we
want to have an age property which
should store a
number again let's use semicolon then we
also want to have an address
property and in this address property we
want to store an object so for the
object we specify a set of curly braces
like this now in that object we want to
have a city property which should store
a string value again let's use semicolon
and we also want to have a country
property and that also should store a string
string
value so this is how the type of this
object will look
like if I remove this type from here so
let me cut this type from
here and now if I H over this person
object object you see that's how the
type of this person looks like for the
inner object we have this property to
which we have assigned an object this
set of curly braces and there we are
specifying the property name and the
type of value which that property is
going to store
store
okay so let me get that
back so here we are specifying the type
of the person variable and then here we
are assigning an object to that person
and this object matches the type of this person
person
variable all right so this is all from
this lecture if you have any questions
then feel free to ask it thank you for
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
