记录一次使用mitt库后了解到的type和interface异同

起因是在初始化mitt实例时,发现如果传入interface作为泛型时会抛出异常:

类型"Events"不满足约束"Record<EventType, unknown>"。

类型"Events"中缺少类型"string"的索引签名。ts(2344)。

于是去看了一下传入的泛型Event 的定义:

typescript 复制代码
export declare type EventType = string | symbol;
//  ...
export default function mitt<Events extends Record<EventType, unknown>>(all?: EventHandlerMap<Events>): Emitter<Events>;

这里mitt对传入的泛型Events用extends关键字做了个约束,要求Events必须满足Record<EventType, unknown>,也就是说Events必须是一个键为字符串字面量,值为unknownRecord类型。

其中type有隐式索引签名(implicit index signature)Record<PropertyKey, unknown> 自动满足条件,但是interface是一种静态的类型声明,它并没有隐式索引签名,因此会抛出异常,如果需要使用interface,需要手动添加索引签名:

typescript 复制代码
interface Events {
	// ...
	[key: string | symbol]: unknown
}

但是如果这样写的话,会出现以下问题:

  • 接口就的类型约束就被破坏了,key可以是任意的字符串,无法确保事件的key是上面编写的字符串字面量;
  • 接口可以被任意扩展,可能添加非法事件;
  • 无法利用类型系统进行静态检查。
typescript 复制代码
interface Events {
  // ...
}

interface Events {
  [key: number]: string // 新增了数字key
}

为什么mitt要用Record<EventType, unknown>来做限制而不是Record<EventType, any>

unknownany 虽然都代表"不确定的类型",但它们在类型安全性上有着本质区别:

  1. unknown 是类型安全的顶级类型

    • 它是 TypeScript 3.0 引入的类型安全的"任意值"表示
    • 任何值都可以赋给 unknown 类型变量
    • 但在使用前必须进行类型检查或类型断言
  2. any 是类型系统的逃生舱

    • 它会完全绕过 TypeScript 的类型检查
    • 可以对其执行任何操作而不触发类型错误
    • 相当于回到了纯 JavaScript 的开发模式

参考资料:

www.totaltypescript.com/type-vs-int...

相关推荐
柯克七七2 小时前
我把 bug 修得太干净了,测试组以为这个模块本来就没问题
前端·javascript·typescript
退休倒计时3 小时前
【每日一题】LeetCode 39. 组合总和 TypeScript
算法·leetcode·typescript
yyt3630458414 小时前
KlineChartQuant Tooltip 高频交互 200FPS 性能优化完整复盘
前端·经验分享·性能优化·typescript·vue·交互·chrome devtools
用户0934077735149 小时前
HarmonyOS WPS Open SDK 实践:办公审批附件「打开—编辑—回传」代码实现
typescript·harmonyos
Flynt9 小时前
TypeScript 5.8 让我少踩了一个大坑,顺手再聊聊 --erasableSyntaxOnly
前端·javascript·typescript
退休倒计时1 天前
【每日一题】LeetCode 17. 电话号码的字母组合 TypeScript
算法·leetcode·typescript
无情的西瓜皮2 天前
MCP 协议实战:从零搭建一个 MCP 服务器(Node.js 版)
vue.js·人工智能·typescript·node.js
退休倒计时2 天前
【每日一题】LeetCode 78. 子集 TypeScript
算法·leetcode·typescript
学习-学习2 天前
Node.js 现在能直接跑 TypeScript 了?Type Stripping 原理、限制与 tsx / ts-node 取舍
typescript·node.js
yume_sibai3 天前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript