JavaScript和TypeScript中的symbol[每日前端夜话0xC0]
symbol 是 JavaScript 和 TypeScript 中的原始数据类型,可用于对象属性。与 number 和 string 相比,symbol 具有一些独特的功能,使它脱颖而出。
JavaScript 中的符号
可以用 Symbol() 工厂函数创建符号:
1const TITLE = Symbol('title')
Symbol 没有构造函数。该参数是可选描述。通过调用工厂函数,为 TITLE 分配了这个新创建的符号的唯一值。此符号现在是唯一的,可与所有其他符号区分开,并且不会与具有相同描述的任何其他符号冲突。
1const ACADEMIC_TITLE = Symbol('title')2const ARTICLE_TITLE = Symbol('title')34if(ACADEMIC_TITLE === ARTICLE_TITLE) {5 // THis is never true6}
该描述可帮助你在开发期间获取有关符号的信息:
1console.log(ACADEMIC_TITLE.description) // title2console.log(ACADEMIC_TITLE.toString()) // Symbol(title)
如果你想拥有独特且唯一的可比值,那么符号就很棒。对于运行时切换或模式比较:
1// A shitty logging framework 2const LEVEL_INFO = Symbol('INFO') 3const LEVEL_DEBUG = Symbol('DEBUG') 4const LEVEL_WARN = Symbol('WARN') 5const LEVEL_ERROR = Symbol('ERROR') 6 7function log(msg, level) { 8 switch(level) { 9 case LEVEL_WARN: 10 console.warn(msg); break11 case LEVEL_ERROR: 12 console.error(msg); break;13 case LEVEL_DEBUG: 14 console.log(msg); 15 debugger; break;16 case LEVEL_INFO:17 console.log(msg);18 }19}
符号也可用作属性键,但不可迭代,这对序列化很有用
1const print = Symbol('print') 2 3const user = { 4 name: 'Stefan', 5 age: 37, 6 [print]: function() { 7 console.log(`${this.name} is ${this.age} years old`) 8 } 9}1011JSON.stringify(user) // { name: 'Stefan', age: 37 }12user[print]() // Stefan is 37 years old
全局符号注册表
存在一个全局符号注册表,允许你在整个程序中访问 token。
1Symbol.for('print') // creates a global symbol 2 3const user = { 4 name: 'Stefan', 5 age: 37, 6 // uses the global symbol 7 [Symbol.for('print')]: function() { 8 console.log(`${this.name} is ${this.age} years old`) 9 }10}
首先调用 Symbol.for 创建一个符号,第二个调用使用相同的符号。如果将符号值存储在变量中并想知道键,则可以使用 Symbol.keyFor()
1const usedSymbolKeys = [] 2 3function extendObject(obj, symbol, value) { 4 //Oh, what symbol is this? 5 const key = Symbol.keyFor(symbol) 6 //Alright, let's better store this 7 if(!usedSymbolKeys.includes(key)) { 8 usedSymbolKeys.push(key) 9 }10 obj[symnbol] = value11}1213// now it's time to retreive them all14function printAllValues(obj) {15 usedSymbolKeys.forEach(key => {16 console.log(obj[Symbol.for(key)])17 })18}
漂亮!
TypeScript中的符号
TypeScript 完全支持符号,它是类型系统中的主要成员。symbol 本身是所有可能符号的数据类型注释。请参阅前面的 extendObject 函数。为了允许所有符号扩展我们的对象,可以使用 symbol 类型:
1const sym = Symbol('foo')23function extendObject(obj: any, sym: symbol, value: any) {4 obj[sym] = value5}67extendObject({}, sym, 42) // Works with all symbols
还有子类型 unique symbol。unique symbol 与声明紧密相关,只允许在 const 声明中引用这个确切的符号。
你可以将 TypeScript 中的名义类型视为 JavaScript 中的名义值。
要获得 unique symbol 的类型,你需要使用 typeof 运算符。
1const PROD: unique symbol = Symbol('Production mode')2const DEV: unique symbol = Symbol('Development mode')34function showWarning(msg: string, mode: typeof DEV | typeof PROD) {5 // ...6}
符号位于 TypeScript 和 JavaScript 中名义类型和不透明类型的交集。并且是我们在运行时最接近标称类型检查的事情。这是一种用来重建像 enum 这样结构的很好的方法。
运行时枚举
一个有趣的符号例子是在 JavaScript 中重新创建运行时的 enum 行为。TypeScript 中的 enum 是不透明的。这实际上意味着你不能将字符串值分配给 enum 类型,因为 TypeScript 会将它们视为唯一的:
1enum Colors {2 Red = 'Red',3 Green = 'Green',4 Blue = 'Blue',5}67const c1: Colors = Colors.Red;8const c2: Colors = 'Red'; // 无法直接分配
如果你做一下比较,会发现非常有趣:
1enum Moods { 2 Happy = 'Happy', 3 Blue = 'Blue' 4} 5 6// This condition will always return 'false' since the 7// types 'Moods.Blue' and 'Colors.Blue' have no overlap. 8if(Moods.Blue === Colors.Blue) { 9 // Nope10}
即使使用相同的值类型,在枚举中它们也足够独特,以便 TypeScript 认为它们不具有可比性。
在 JavaScript 领域,我们可以使用符号创建类似的枚举。在以下例子中查看彩虹和黑色的颜色。我们的“枚举” Colors 仅包含颜色而并非黑色的符号:
1// All Color symbols 2const COLOR_RED: unique symbol = Symbol('RED') 3const COLOR_ORANGE: unique symbol = Symbol('ORANGE') 4const COLOR_YELLOW: unique symbol = Symbol('YELLOW') 5const COLOR_GREEN: unique symbol = Symbol('GREEN') 6const COLOR_BLUE: unique symbol = Symbol('BLUE') 7const COLOR_INDIGO: unique symbol = Symbol('INDIGO') 8const COLOR_VIOLET: unique symbol = Symbol('VIOLET') 9const COLOR_BLACK: unique symbol = Symbol('BLACK')1011// All colors except Black12const Colors = {13 COLOR_RED,14 COLOR_ORANGE,15 COLOR_YELLOW,16 COLOR_GREEN,17 COLOR_BLUE,18 COLOR_INDIGO,19 COLOR_VIOLET20} as const;
我们可以像使用 enum 一样使用这个 symbol:
1function getHexValue(color) {2 switch(color) {3 case Colors.COLOR_RED: return '#ff0000'4 //...5 }6}
并且 symbol 无法比较:
1const MOOD_HAPPY: unique symbol = Symbol('HAPPY') 2const MOOD_BLUE: unique symbol = Symbol('BLUE') 3 4// 除黑色外的所有颜色 5const Moods = { 6 MOOD_HAPPY, 7 MOOD_BLUE 8} as const; 910// 因为类型,这种情况总是会返回'false'11// 'typeof MOOD_BLUE' 和 'typeof COLOR_BLUE' 并不重叠.12if(Moods.MOOD_BLUE === Colors.COLOR_BLUE) {13 // Nope14}
我们要添加一些 TypeScript 注释:
1.我们将所有符号键(和值)声明为 unique symbols,这意味着我们分配符号的常量永远不会改变。
2.我们将“枚举”对象声明为 as const。有了它,TypeScript 就会将类型设置为允许每个符号,只允许我们定义的完全相同的符号。
这允许我们在为函数声明定义符号“枚举”时获得更多的类型安全性。我们从辅助类型开始,从对象中获取所有值类型。
1type ValuesWithKeys<T, K extends keyof T> = T[K];2type Values<T> = ValuesWithKeys<T, keyof T>
记住,我们使用了 as const,这意味着我们的值被缩小到精确的值类型(例如,类型是 COLOR_RED)而不是它们的总体类型(symbol)。
有了它,就可以声明我们的功能:
1function getHexValue(color: Values<typeof Colors>) { 2 switch(color) { 3 case COLOR_RED: 4 // super fine, is in our type 5 case Colors.COLOR_BLUE: 6 // also super fine, is in our type 7 break; 8 case COLOR_BLACK: 9 // what? What is this??? TypeScript errors 10 break;11 }12}
如果使用 symbol 键和值而不是仅使用 symbol 值,则可以删除辅助和 const 上下文:
1const ColorEnum = { 2 [COLOR_RED]: COLOR_RED, 3 [COLOR_YELLOW]: COLOR_YELLOW, 4 [COLOR_ORANGE]: COLOR_ORANGE, 5 [COLOR_GREEN]: COLOR_GREEN, 6 [COLOR_BLUE]: COLOR_BLUE, 7 [COLOR_INDIGO]: COLOR_INDIGO, 8 [COLOR_VIOLET]: COLOR_VIOLET, 9}1011function getHexValueWithSymbolKeys(color: keyof typeof ColorEnum) {12 switch(color) {13 case ColorEnum[COLOR_BLUE]:14 // 15 break;16 case COLOR_RED:17 // 18 break;19 case COLOR_BLACK: 20 // 21 break;22 }23}
这样,通过 TypeScript 的独特符号,你可以在编译时获得类型安全性、运行时的实际类型安全性以及 JavaScript 的 `unique Symbol 的特性。
原文:https://fettblog.eu/symbols-in-javascript-and-typescript/
更多相关文章
- 【jQuery】判断浏览器类型和版本
- jquery ajax和php实现返回值 json类型
- JQUERY 如何选择某个ID为AAA的DIV下的所有INPUT类型为TEXT的集合
- 在中的元素的自定义子弹符号,这是一个普通字符,而不是一个图像
- 9.1.4 前端 - HTML body标签 - 标题,段落,分割线,换行,特殊符号,列
- 关于 客户端发现响应内容类型为“text/html; charset=utf-8”,但
- 文件上传js打开文件管理器过滤只显示指定类型文件的实现
- PDA调用接口 提示:客户端发现响应内容的类型为“text/html;charse
- js去除字符串中所有html标签及 符号