JavaScript和TypeScript中的符号

@ddprrt

翻译：疯狂的技术宅

原文：fettblog.eu/symbols-in-…

未经容许严禁转载

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` 的特性。

欢迎关注前端公众号：前端先锋，领取前端工程化实用工具包。