TS 中的 enum

Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.

1. enum 是 TS 带来的特性
2. enum 是 TS 中少有不仅仅是对类型的拓展特性

基础使用

TypeScript
Copy
enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

编译后是啥样？

只有静态访问

TypeScript
Copy
enum A {
  "一" = 1,
  "二" = 2,
}

function App() {
  return <div>{A.一}</div>;
}

export default App;

JavaScript
Copy
function App() {
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
    children: 1
    /* 一 */
  });
}

可以看出已经被替换掉了

如果存在动态访问

TypeScript
Copy
enum A {
  "一" = 1,
  "二" = 2,
}

function f(key) {
  return A[key];
}

function App() {
  return (
    <div>
      {A.一}
      <h1 />
      {f("一")}
    </div>
  );
}

TypeScript
Copy
var A = /* @__PURE__ */ ((A2) => {
  A2[A2["一"] = 1] = "一";
  A2[A2["二"] = 2] = "二";
  return A2;
})(A || {});
function f(key) {
  return A[key];
}
function App() {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
    1,
    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", {}),
    f("一")
  ] });
}

这个看着很奇怪的写法是为了 reverse mappings，不太常用