DEV Community

Cover image for The Differences Between 'Object', '{}', and 'object' in TypeScript
Zachary Lee
Zachary Lee

Posted on • Originally published at webdeveloper.beehiiv.com on

The Differences Between 'Object', '{}', and 'object' in TypeScript

Latest updates in my newsletter.

In TypeScript, when we want to define an object type, there are several concise options such as 'Object', '{}', and 'object'. What are the differences between them?

Object (uppercased)

Object (uppercased) describes properties common to all JavaScipt objects. It is defined in the lib.es5.d.ts file that comes with the TypeScript library.

As you can see, it includes some common properties like toString(), valueOf(), and so on.

Because it emphasizes only those properties that are common to JavaScript objects. So you can assign boxable objects like string, boolean, number, bigint, symbol to it, but not the other way around.

{}

{} describes an object that has no members of its own, which means TypeScript will complain if you try to access its property members:

From the code example above, we can see that {} and Object (uppercased) have the same features. That is, it can only access those properties that are common (even if the JavaScript code logic is correct), all boxable objects can be assigned to it, etc.

This is because the {} type can access those common properties through the prototype chain, and it also has no own properties. So it behaves the same as the Object (uppercased) type. But they represent different concepts.

object (lowercased)

object (lowercased) means any non-primitive type, which is expressed in code like this:

type PrimitiveType =
  | undefined
  | null
  | string
  | number
  | boolean
  | bigint
  | symbol;

type NonPrimitiveType = object;
Enter fullscreen mode Exit fullscreen mode

This means that all primitive types are not assignable to it, and vice versa.


If you find my content helpful, please consider subscribing. I send a daily newsletter with the latest web development updates. Thanks for your support!

Top comments (11)

Collapse
 
leob profile image
leob • Edited

Great post, this is the kind of content that we want to see on dev.to, don't we? :-)

I was totally unaware of "lowercase object" (but I did hear about "Record") - super confusing, as is often the case with Javascript and TypeScript, for historical reasons of how it "came to be" ...

I honestly have no idea why they added "lowercase object", and would never recommend using it in place of "Record", but anyway, nice to know about it.

Collapse
 
igorrubinovich profile image
Igor Rubinovich

In "This means that all non-primitive types are not assignable to it, and vice versa." you probably meant "assignable" without the "not"

Collapse
 
hansifer profile image
Hans

They probably meant “all primitive types”, since that’s what’s demonstrated in the code block.

Collapse
 
zacharylee profile image
Zachary Lee

Thanks for your tip, I fixed it.

Collapse
 
tonny0831 profile image
tonny_x_bit

Your teaching is very good. I became know about object.

Collapse
 
earnstein profile image
bakare damilola

Great content, I'll definitely be referencing this a lot till it's stuck in my brain.

Collapse
 
freelancer2020 profile image
Mostafa

It's not recommend to use type object, Object and {}
Btw Object it's not typescript specifications, and object a constructive type rarely can be used, maybe if you're writing a library declaration.

Collapse
 
dipakahirav profile image
Dipak Ahirav

Nice very useful!

Collapse
 
blackr1234 profile image
blackr1234

So the lowercase one is more strict, weird.

Collapse
 
dshung1997 profile image
Sy Hung Doan

Informative!

Collapse
 
makinator1 profile image
diego fernandez

Thanks You, easy to understand.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.