How to use Object, object and {} in TypeScript?

Object, object, and {} (object type)

I don’t know if there are many brothers like me. In the development of typescript front-end projects, the object type is always not well used; sometimes it is defined as Object , sometimes it is defined as object , but most of the time we get confused Both.

As far as I am concerned, I subconsciously define the object as object . I am lucky to compile and pass (happy😄). I am almost lucky. There is also a hint to repair the vscode. One-click repair is also an excellent memory. However, we are not the ones who are not responsible after the work is done. For the responsibility in my heart, these differences in usage must be understood today (💪🏻), let’s start now! !

Object

The Object type is the type of all instances of the Object class. It is defined by the following two interfaces:

• The Object interface defines the properties on the Object.prototype prototype object;
• The ObjectConstructor interface defines the properties of the Object class.

How to understand the above two points?

Object is an object, but it contains all the common functions of the original js. This needs to understand the prototype chain of js (not more about it here), and analyze it from the TypeScript source code:

interface Object {
   /** The initial value of Object.prototype.constructor is the standard built-in Object constructor. */
   constructor: Function;
   /** Returns a string representation of an object. */
   toString(): string;
   /** Returns a date converted to a string using the current locale. */
   toLocaleString(): string;
   /** Returns the primitive value of the specified object. */
   valueOf(): Object;
   /**
    * Determines whether an object has a property with the specified name.
    * @param v A property name.
    */
   hasOwnProperty(v: PropertyKey): boolean;
   /**
    * Determines whether an object exists in another object's prototype chain.
    * @param v Another object whose prototype chain is to be checked.
    */
   isPrototypeOf(v: Object): boolean;
   /**
    * Determines whether a specified property is enumerable.
    * @param v A property name.
    */
   propertyIsEnumerable(v: PropertyKey): boolean;
}

interface ObjectConstructor {
 /** Invocation via `new` */
 new(value?: any): Object;
 /** Invocation via function calls */
 (value?: any): any;
 readonly prototype: Object;
 getPrototypeOf(o: any): any;
 // ···
}
declare var Object: ObjectConstructor;

It can be seen from this that the constructor of Object points to Function. When learning the js prototype chain, we know that Object and Function point to each other;

Object type can be created new

Note : The Object type contains all primitive/basic types, so the Object type can be assigned to the basic type; if the property name of the value object conflicts with the property in the Object interface, the TypeScript compiler will prompt the corresponding error: the following example , The toString method is overridden in the object, but the return type conflicts with the return type string in the Object, so an error is reported;

let obj: Object; // 或者 let obj = new Object();
obj = "hell oworld";
obj = 1;
obj = true;
obj = undefined; //Error:Type 'undefined' is not assignable to type 'Object'.
obj = {
      // Type 'number' is not assignable to type 'string'
    toString() {
        return 123;
    }
}

Array Object => Object[] : Because Object contains primitive types, the following code compiles without error

let obj: Object[];
obj = [
    123,
    true,
    "hello world",
    [1, 'a', false]
];

object

The object type is: a new type introduced by TypeScript 2.2, which is used to represent original type . object is a collection of key-value pairs, especially in value must also be object .

Note : The object type can use all the properties and methods defined on the Object type by default. These properties and methods can be used implicitly through the JavaScript prototype chain, but if the properties or methods in the prototype chain are rewritten in the object , Then it will be directly covered and not affected by the prototype chain!

let obj: object; 
obj = 1; // Error:Type 'number' is not assignable to type 'object'.
obj = true; // Error: Type 'boolean' is not assignable to type 'object'.
obj = 'a'; // Error: Type 'string' is not assignable to type 'object'.
obj = undefined; //Error:Type 'undefined' is not assignable to type 'object'.
obj = {
    a : "hell oworld",
    b : 1,
    c : true,
}

obj = {
    toString() {
        return 123;
    }
}
console.log(obj.toString()) // 123

{}/Empty type

Empty type: {} . It describes an object with no members. In typeScript, an empty type can be generated in the following ways:

• 1. The variable type is not declared, but the initial value is {} ;

  let obj = {}; 

• Declare the variable type directly as {} .

  let obj: {}; 

When you try to access any property of such an object, TypeScript will generate a compile-time error; however, you can still use all the properties and methods defined on the Object type, which can be passed through the JavaScript prototype chain Use implicitly:

let obj: {}; 
obj = undefined; //Error:Type 'undefined' is not assignable to type '{}'.
obj = 'a';
obj = {
    a : "hell oworld",
    b : 1,
    c : true,
    toString() {
        return 123;
    }
}
console.log(obj) 
/*
{
  "a": "hell oworld",
  "b": 1,
  "c": true
} 
*/
console.log(obj.toString()) // 123;

Summary (comparison)

For Object, object and {}, all the properties and methods defined on the Object type can be used for all three. These properties and methods can be used implicitly through JavaScript's prototype chain; and none of them can be assigned to undefined , Null type;

Object vs object:

• 1. The performance of attribute method rewriting on the two prototypes is inconsistent;
• 2. The object type value indicates that is not the original type , and the Object type value can be the original type;
• 3. Object can be defined new

Object vs {}:

• 1. Both type values can be primitive types;
• 2. The performance of attribute method rewriting on the prototypes of the two is inconsistent;
• 3. Object can be defined new

object vs {}：

• 1. The rewriting performance of the attribute method on the prototypes of the two is the same;
• 2. The object type value indicates that is not the original type , and the {} type value can be a primitive type;