谈谈{}跟Object以及object的区别

在TS中,相信很多人搞不清Objectobject以及{}之间的关系,或者没有深究过,觉得他们只是同一个类型的不同别名,其实不然,每一个的存在都是有原因的。今天我们一起来探究他们的不同之处。

{}

{}包含了除了nullundefined所有的类型,类似于这样:

(这也是{}unknown的区别,unknown可以包含nullundefined)

但是它对它所指向的对象一无所知,访问任何属性或者方法都会报找不到:

{}就像一个大集合,包含了其他的类型。

其实整个类型系统都是如此,类型表示值的集合。在我们日常coding过程中,时不时会遇到Argument of type 'xxx' is not assignable to parameter of type 'xxx'.的报错,其实就是看我们要赋的值在不在我们声明的对象的集合里面。(比如"foo"|"bar"这种literal type可以赋给接受string类型的变量)。

Object

类似于{},所有拥有Object原型的值都能赋给Object作为类型的变量。

但是有一丢丢规则,值的原型里得有Object(当然了,JS的大部分值都是有的)。

它所指向的对象一无所知,访问任何属性或者方法都会报找不到:

需要注意,Object对于对象里的某些方法是有要求的(比如Object原型对象的toString方法):

这里Object就不能用了,而{}没有这种检查。这种行为有时候让人迷惑,所以二者选其一,我选{},😁

object

然后就是object类型了。 object{}有一点不同,它不包含原始类型。

除了这一点,其它的跟{}很相似。

所以我们应该用哪个呢?

一般情况下,我们应该一个也不用😝。如果我们知道我们数据的具体结构,那单独创建一个type或者interface是最好的。但是在类型编程的时候,我们就得选一个。

比如我们有一个merge函数,用来合并两个对象,把我们可能会这么写:

typescript 复制代码
function merge<A extends {},B extends {}>(a:A,b:B):A&B{
    return {
        ...a,
        ...b
    }
}

或者这样:

typescript 复制代码
function merge<A extends Object,B extends Object>(a:A,b:B):A&B{
    return {
        ...a,
        ...b
    }
}

看起来没问题,但我们传给它原始类型它是可以接受的,结果似乎有点奇怪:

这大概不是我们写merge函数想要的效果。如果这时候我们把类型参数换成object,问题就迎刃而解了。

所以:

  1. 用于一些复合对象的情况,选object
  2. 复合对象跟原始类型皆可的情况,选{}
  3. 如果要包含nullundefined的情况,用unknown
相关推荐
子兮曰2 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰2 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万2 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝2 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋2 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁2 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄2 天前
JavaScript 隐式全局变量解析
javascript
汉堡大王95272 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大2 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师2 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端