前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript和TypeScript中的symbol[每日前端夜话0xC0]

JavaScript和TypeScript中的symbol[每日前端夜话0xC0]

作者头像
疯狂的技术宅
发布2019-09-18 14:41:10
1.3K0
发布2019-09-18 14:41:10
举报
文章被收录于专栏:京程一灯京程一灯

symbol 是 JavaScript 和 TypeScript 中的原始数据类型,可用于对象属性。与 numberstring 相比,symbol 具有一些独特的功能,使它脱颖而出。

JavaScript 中的符号

可以用 Symbol() 工厂函数创建符号:

Symbol 没有构造函数。该参数是可选描述。通过调用工厂函数,为 TITLE 分配了这个新创建的符号的唯一值。此符号现在是唯一的,可与所有其他符号区分开,并且不会与具有相同描述的任何其他符号冲突。

该描述可帮助你在开发期间获取有关符号的信息:

如果你想拥有独特且唯一的可比值,那么符号就很棒。对于运行时切换或模式比较:

符号也可用作属性键,但不可迭代,这对序列化很有用

全局符号注册表

存在一个全局符号注册表,允许你在整个程序中访问 token。

首先调用 Symbol.for 创建一个符号,第二个调用使用相同的符号。如果将符号值存储在变量中并想知道键,则可以使用 Symbol.keyFor()

漂亮!

TypeScript中的符号

TypeScript 完全支持符号,它是类型系统中的主要成员。symbol 本身是所有可能符号的数据类型注释。请参阅前面的 extendObject 函数。为了允许所有符号扩展我们的对象,可以使用 symbol 类型:

还有子类型 unique symbolunique symbol 与声明紧密相关,只允许在 const 声明中引用这个确切的符号。

你可以将 TypeScript 中的名义类型视为 JavaScript 中的名义值。

要获得 unique symbol 的类型,你需要使用 typeof 运算符。

符号位于 TypeScript 和 JavaScript 中名义类型和不透明类型的交集。并且是我们在运行时最接近标称类型检查的事情。这是一种用来重建像 enum 这样结构的很好的方法。

运行时枚举

一个有趣的符号例子是在 JavaScript 中重新创建运行时的 enum 行为。TypeScript 中的 enum 是不透明的。这实际上意味着你不能将字符串值分配给 enum 类型,因为 TypeScript 会将它们视为唯一的:

如果你做一下比较,会发现非常有趣:

即使使用相同的值类型,在枚举中它们也足够独特,以便 TypeScript 认为它们不具有可比性。

在 JavaScript 领域,我们可以使用符号创建类似的枚举。在以下例子中查看彩虹和黑色的颜色。我们的“枚举” Colors 仅包含颜色而并非黑色的符号:

我们可以像使用 enum 一样使用这个 symbol:

并且 symbol 无法比较:

我们要添加一些 TypeScript 注释:

  1. 我们将所有符号键(和值)声明为 unique symbols,这意味着我们分配符号的常量永远不会改变。
  2. 我们将“枚举”对象声明为 as const。有了它,TypeScript 就会将类型设置为允许每个符号,只允许我们定义的完全相同的符号。

这允许我们在为函数声明定义符号“枚举”时获得更多的类型安全性。我们从辅助类型开始,从对象中获取所有值类型。

记住,我们使用了 as const,这意味着我们的值被缩小到精确的值类型(例如,类型是 COLOR_RED)而不是它们的总体类型(symbol)。

有了它,就可以声明我们的功能:

如果使用 symbol 键和值而不是仅使用 symbol 值,则可以删除辅助和 const 上下文:

这样,通过 TypeScript 的独特符号,你可以在编译时获得类型安全性、运行时的实际类型安全性以及 JavaScript 的 `unique Symbol 的特性。

原文:https://fettblog.eu/symbols-in-javascript-and-typescript/

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端先锋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JavaScript 中的符号
  • 全局符号注册表
  • TypeScript中的符号
  • 运行时枚举
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档