TypeScript之Object、object、 的区别

Posted 2023-04-08

参考技术A 对于 javascript 而言，只有（大） Object ，没有（小） object
object 只是 typeof 返回的一个字符串

对于 TypeScript 来说，同时存在 object 和 Object

object 是TypeScript v2.2 引入的新类型，用于正式表示对象类型。
至此，TypeScript的原始类型（ number、string、bigint、boolean、symbol、null、undefined、object ）对应的正是JavaScript定义的 8 种内置类型： Number、String、BigInt、Boolean、Symbol、Null、Undefined、Object 。
当然，TypeScript还定义了其他重要的类型： unknown、never、void、数组、元组、函数 等
object 表示任何非原始值类型，包括对象、函数、数组等
当对 object 类型的变量赋予原始值时，TS编译器会报错

JavaScript WeakMap 要求键必须是对象，TypeScript 在定义 WeakMap 时 使用的正是 object 约束键的类型

TS把 JavaScript Object 分成了两个接口来定义：

Object 的所有实例都继承了 Object 接口的所有属性/方法：

object 类型也可以访问 Object 接口上定义的所有属性/方法

有趣的是，由于 JavaScript 的装箱拆箱机制，基本类型有能力访问 Object.prototype 原型对象上的属性。
因此，在 TS Object 类型可以同时接受引用类型和基本类型（不包括 undefined 和 null ）。但 object 类型不能接受原始值。

因此，在约束类型为非原始值类型时，应当始终使用 object！

需要注意的是，如果 Object 类型的值对象属性名与 Object 接口定义的属性冲突，则TS编译报错。

而 object 类型不会。

描述一个没有成员的对象，试图访问它的任何属性时，TS都会编译错误。
但仍然可以访问 Object 类型上的所有属性/方法

也可以被赋予原始值

虽然 Object 和 都可以接受基本类型的值，但并不包括 null 和 undefined 。

可以明显感觉到， 与 Object 的效果几乎一样，即 == Object ，但 Object 更规范。

object 是一个宽泛的通用的非基本类型

object 是TypeScript v2.2引入的一种非基本类型，不能被赋予原始值。
Object 是对TypeScript对 JavaScript Object.prototype 原型对象的定义，是所属对象类型的顶层类型，即所有对象类型都继承了 Object 中定义的属性/方法。同时，由于 JavaScript 的拆箱装箱机制， Object 类型的变量可以被赋予原始值，而基本类型也可以访问 Object 中定义的属性/方法。
是一个没有任何成员的对象类型，它可以访问 Object 中定义的属性/方法，也可以被赋予原始值。

因此，在约束对象类型时，我们应该始终使用 object ！

其实，不止有 Object 与 object ，还有 Number 与 number 、 Boolean 与 boolean 、 String 与 string 等等。
Object、Number、Boolean 都定义在TypeScript内置的 .d.ts 中，对我们是可见的；而 object、number、boolean 这些TS的内置原始类型 都是不可见的。
在开发中，我们应当始终使用这些原始类型，而不是使用 Object、Number、Boolean

TypeScript之defineProperty实现数据绑定

一:绑定类

class CommonTools {
    public static watch<T>(obj: Object, name: string, callback: ($data: T) => void, init: boolean = true): void {
        let $value: T = obj[name] as T;
        Object.defineProperty(obj, name, {
            get() { return $value },
            set($newValue) {
                if ($value != $newValue) {
                    $value = $newValue;
                    callback($value);
                }
            }
        });
        init && callback($value);
    }
}

二:测试

class M {
    private k: number = 10;
}

window["a"] = new M();
CommonTools.watch<number>(window["a"], "k", ($data: number) => {
    console.log(`aaaa : ${$data}`);
}, true);
window["a"].k = 12;

CommonTools.watch<number>(window["a"], "k", ($data: number) => {
    console.log(`bbb : ${$data}`);
}, true);
window["a"].k = 13;

三: 结果

四:结论

此种方案非常简单, 但是只能由一个观察者(这是最大的坑)