• Web Developer
  • Posts
  • The Differences Between 'Object', '{}', and 'object' in TypeScript

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

Master TypeScript: Key Differences Between 'Object', '{}', and 'object' Explained

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;

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

If you find my content helpful, please consider subscribing. Thanks for your support!

Reply

or to participate.