JavaScript和TypeScript中的符号

symbol 是JavaScript和TypeScript中的一种原始数据类型，除此之外，它还可以用于对象属性。与 和 相比， s有一些独特的功能，使其脱颖而出。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

全局符号注册表#

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

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)])
  })
}

Nifty!

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 symbols的类型，你需要使用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的结构类型系统中唯一可能的名义类型。

符号在TypeScript和JavaScript中处于名义类型和不透明类型的交叉点。并且是我们在运行时得到的最接近于名义类型检查的东西。一个很好的方法来重新创建像enums这样的结构，例如。

运行时枚举#

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

enum Colors {
  Red = 'Red',
  Green = 'Green',
  Blue = 'Blue',
}

const c1: Colors = Colors.Red;
const c2: Colors = 'Red'; // 💣 No direct assigment possible

如果你做比较的话，会非常有趣。

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;

我们可以像使用enums一样使用这个符号。

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

而且这些符号不能被比较。

const MOOD_HAPPY: unique symbol = Symbol('HAPPY')
const MOOD_BLUE: unique symbol = Symbol('BLUE')

// All colors except Black
const Moods = {
  MOOD_HAPPY,
  MOOD_BLUE
} as const;

// 💣 This condition will always return 'false' since the types 
// 'typeof MOOD_BLUE' and 'typeof COLOR_BLUE' have no overlap.
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;
  }
}

如果你使用符号键和值而不是只使用符号值，你可以摆脱帮助器和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;
  }
}

这让你在编译时通过TypeScriptunique symbol's获得类型安全，在运行时通过JavaScript的Symbol's的独特特性获得实际的类型安全。