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

  • 2019 年 10 月 5 日
  • 笔记

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

JavaScript 中的符号

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

const TITLE = Symbol('title')

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

const ACADEMIC_TITLE = Symbol('title')  const ARTICLE_TITLE = Symbol('title')    if(ACADEMIC_TITLE === ARTICLE_TITLE) {    // THis is never true  }

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

console.log(ACADEMIC_TITLE.description) // title  console.log(ACADEMIC_TITLE.toString()) // Symbol(title)

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

// A shitty logging framework  const LEVEL_INFO = Symbol('INFO')  const LEVEL_DEBUG = Symbol('DEBUG')  const LEVEL_WARN = Symbol('WARN')  const LEVEL_ERROR = Symbol('ERROR')    function log(msg, level) {    switch(level) {      case LEVEL_WARN:        console.warn(msg); break      case LEVEL_ERROR:        console.error(msg); break;      case LEVEL_DEBUG:        console.log(msg);        debugger; break;      case LEVEL_INFO:        console.log(msg);    }  }

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

const print = Symbol('print')    const user = {    name: 'Stefan',    age: 37,    [print]: function() {      console.log(`${this.name} is ${this.age} years old`)    }  }    JSON.stringify(user) // { name: 'Stefan', age: 37 }  user[print]() // Stefan is 37 years old

全局符号注册表

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

Symbol.for('print') // creates a global symbol    const user = {    name: 'Stefan',    age: 37,    // uses the global symbol    [Symbol.for('print')]: function() {      console.log(`${this.name} is ${this.age} years old`)    }  }

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

const usedSymbolKeys = []    function extendObject(obj, symbol, value) {    //Oh, what symbol is this?    const key = Symbol.keyFor(symbol)    //Alright, let's better store this    if(!usedSymbolKeys.includes(key)) {      usedSymbolKeys.push(key)    }    obj[symnbol] = value  }    // now it's time to retreive them all  function printAllValues(obj) {    usedSymbolKeys.forEach(key => {      console.log(obj[Symbol.for(key)])    })  }

漂亮！

TypeScript中的符号

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

const sym = Symbol('foo')    function extendObject(obj: any, sym: symbol, value: any) {    obj[sym] = value  }    extendObject({}, sym, 42) // Works with all symbols

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

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

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

const PROD: unique symbol = Symbol('Production mode')  const DEV: unique symbol = Symbol('Development mode')    function showWarning(msg: string, mode: typeof DEV | typeof PROD) {   // ...  }

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

运行时枚举

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

enum Colors {    Red = 'Red',    Green = 'Green',    Blue = 'Blue',  }    const c1: Colors = Colors.Red;  const c2: Colors = 'Red'; // ? 无法直接分配

如果你做一下比较，会发现非常有趣：

enum Moods {    Happy = 'Happy',    Blue = 'Blue'  }    // ? This condition will always return 'false' since the  // types 'Moods.Blue' and 'Colors.Blue' have no overlap.  if(Moods.Blue === Colors.Blue) {    // Nope  }

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

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

// All Color symbols  const COLOR_RED: unique symbol = Symbol('RED')  const COLOR_ORANGE: unique symbol = Symbol('ORANGE')  const COLOR_YELLOW: unique symbol = Symbol('YELLOW')  const COLOR_GREEN: unique symbol = Symbol('GREEN')  const COLOR_BLUE: unique symbol = Symbol('BLUE')  const COLOR_INDIGO: unique symbol = Symbol('INDIGO')  const COLOR_VIOLET: unique symbol = Symbol('VIOLET')  const COLOR_BLACK: unique symbol = Symbol('BLACK')    // All colors except Black  const Colors = {    COLOR_RED,    COLOR_ORANGE,    COLOR_YELLOW,    COLOR_GREEN,    COLOR_BLUE,    COLOR_INDIGO,    COLOR_VIOLET  } as const;

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

function getHexValue(color) {    switch(color) {      case Colors.COLOR_RED: return '#ff0000'      //...    }  }

并且 symbol 无法比较：

const MOOD_HAPPY: unique symbol = Symbol('HAPPY')  const MOOD_BLUE: unique symbol = Symbol('BLUE')    // 除黑色外的所有颜色  const Moods = {    MOOD_HAPPY,    MOOD_BLUE  } as const;    // ? 因为类型，这种情况总是会返回'false'  // 'typeof MOOD_BLUE' 和 'typeof COLOR_BLUE' 并不重叠.  if(Moods.MOOD_BLUE === Colors.COLOR_BLUE) {    // Nope  }

我们要添加一些 TypeScript 注释：

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

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

type ValuesWithKeys<T, K extends keyof T> = T[K];  type Values<T> = ValuesWithKeys<T, keyof T>

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

有了它，就可以声明我们的功能：

function getHexValue(color: Values<typeof Colors>) {    switch(color) {      case COLOR_RED:        // super fine, is in our type      case Colors.COLOR_BLUE:        // also super fine, is in our type        break;      case COLOR_BLACK:        // what? What is this??? TypeScript errors ?        break;    }  }

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

const ColorEnum = {    [COLOR_RED]: COLOR_RED,    [COLOR_YELLOW]: COLOR_YELLOW,    [COLOR_ORANGE]: COLOR_ORANGE,    [COLOR_GREEN]: COLOR_GREEN,    [COLOR_BLUE]: COLOR_BLUE,    [COLOR_INDIGO]: COLOR_INDIGO,    [COLOR_VIOLET]: COLOR_VIOLET,  }    function getHexValueWithSymbolKeys(color: keyof typeof ColorEnum) {    switch(color) {      case ColorEnum[COLOR_BLUE]:        // ?        break;      case COLOR_RED:        // ?        break;      case COLOR_BLACK:        // ?        break;    }  }

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

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

VirMach 便宜 VPS

QNews

QNews