TypeScript中如何使用Object、object和{}？詳情 - 前端,typescript,object 哇喔WEB 博客

Object、object和{}（對象類型）

不知道是不是有很多兄弟和我一樣，在進行typescript的前端項目開發時，總是不能很好地使用對象類型；有時會定義為Object，有時又會定義為object，但是大多時候我們會混淆兩者。

就拿我個人而言，對於對象我都下意識的定義為object，運氣好呢編譯通過了（開心😄），運氣差點呢vscode還有提示修復能，一鍵修復也是記極好了。但是，咱也不是完事就不負責的人呀，為了心裏的那份責任，這些用法的差異今天就非弄懂不可了(💪🏻)，接下來那就開始吧！！

Object

Object類型是所有 Object 類的實例的類型。它由以下兩個接口來定義：

Object 接口定義了 Object.prototype 原型對象上的屬性；
ObjectConstructor 接口定義了 Object 類的屬性。

如何理解上述兩點呢？

Object是一個對象，但是是包含了js原始的所有公用的功能，這個需要去了解js的原型鏈（這裏不過多進行講述），從TypeScript源碼進行分析：

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;

從中可以看出，Object的構造函數指向了Function，在學習js原型鏈時我們知道Object和Function是相互指向對方的；

Object類型可以通過new進行創建；

注意：Object類型包含了所有的原始/基礎類型，所以可以給Object類型賦值為基礎類型；如果值對象屬性名與 Object 接口中的屬性衝突，則 TypeScript 編譯器會提示相應的錯誤：如下例，對象中重寫了toString方法，但是返回類型和Object中返回類型string衝突，所以報錯；

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;
    }
}

數組型Object => Object[]：因為Object包含原始類型，所以下面代碼編譯不會報錯

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

object

object 類型是：TypeScript 2.2 引⼊的新類型，它⽤於表示⾮原始類型。object是鍵值對集合，特殊在值也必須是object。

注意：object類型默認可以使用在 Object 類型上定義的所有屬性和方法，這些屬性和方法可通過 JavaScript 的原型鏈隱式地使用，但是如果在object中重寫了原型鏈中的屬性或者方法，那麼會直接覆蓋，不受原型鏈上的影響！

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

{}/空類型

空類型：{}。它描述了一個沒有成員的對象，在typeScript中可以有以下方式生成空類型：

1、沒有聲明變量類型，但是初始值為{}；
```
let obj = {}; 
```
直接聲明變量類型為{}。
```
let obj: {}; 
```

當你試圖訪問這樣一個對象的任意屬性時，TypeScript 會產生一個編譯時錯誤；但是，你仍然可以使⽤在 Object 類型上定義的所有屬性和⽅法，這些屬性和⽅法可通過 JavaScript 的原型鏈隱式地使⽤：

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;