改进 JavaScript 枚举实现以增强自动完成功能

增强 JavaScript 枚举实现以获得更好的自动完成支持

此方法使用普通 JavaScript 通过添加对基于对象和基于字符串的输入的支持来解决枚举自动完成问题。它确保枚举实现是模块化的和可重用的。

// Approach 1: Object and String-Based Enum with Autocomplete Support
// Modular function for creating an enum with autocomplete support
export function _enum(...arr) {
  return Object.freeze(Object.fromEntries(
    arr.length === 1 && typeof arr[0] === 'object'
      ? Object.entries(arr[0]).flatMap(([a, b]) => [
          [a, b],
          [b, a],
        ])
      : arr
          .map(a => [a, enumItem()])
          .flatMap(([a, b]) => [
            [a, b],
            [b, a],
          ])
  ));
}

// Helper function for creating enum items
function enumItem() {
  return Symbol();
}

// Usage Example 1: Object-based enum
const a = _enum({ foo: 0, bar: 1, baz: 2 });
console.log(a.foo); // 0
console.log(a[1]);  // 'bar'

// Usage Example 2: String-based enum
const b = _enum('foo', 'bar', 'baz');
console.log(b.foo); // Symbol()
console.log(b['baz']); // Symbol()

使用 TypeScript 实现枚举以实现类型安全和自动完成支持

这种方法利用 TypeScript 提供更强大的类型定义，并增强对象和基于字符串的枚举的自动完成功能。 TypeScript 的“as const”功能确保了不变性和更好的类型推断。

// Approach 2: TypeScript Enum with Type Safety
type Enum<T> = T extends readonly string[]
  ? { [K in T[number]]: number }
  : { [K in keyof T]: number };

// Function to create enums with TypeScript
export function _enum<T>(...arr: T[]): Enum<T> {
  return Object.freeze(Object.fromEntries(
    arr.length === 1 && typeof arr[0] === 'object'
      ? Object.entries(arr[0] as object).flatMap(([a, b]) => [
          [a, b],
          [b, a],
        ])
      : arr.map((a) => [a, Symbol()]).flatMap(([a, b]) => [
          [a, b],
          [b, a],
        ])
  ));
}

// Testing the Enum with an array (as const)
const testArray = ["foo", "bar", "baz"] as const;
type A = Enum<typeof testArray>;

// Testing with an object
const testObj = { foo: 0, bar: 1, baz: 2 };
type B = Enum<typeof testObj>;

带单元测试的 Vanilla JavaScript Enum 实现

该解决方案侧重于枚举的普通 JavaScript 实现，并附带单元测试来验证不同环境中的功能。

// Approach 3: JavaScript Enum with Unit Testing
export function _enum(...arr) {
  return Object.freeze(Object.fromEntries(
    arr.length === 1 && typeof arr[0] === 'object'
      ? Object.entries(arr[0]).flatMap(([a, b]) => [
          [a, b],
          [b, a],
        ])
      : arr.map(a => [a, Symbol()]).flatMap(([a, b]) => [
          [a, b],
          [b, a],
        ])
  ));
}

// Unit tests for the enum function
function testEnum() {
  const objEnum = _enum({ foo: 0, bar: 1, baz: 2 });
  console.assert(objEnum.foo === 0, 'Test Failed: objEnum.foo !== 0');
  console.assert(objEnum[1] === 'bar', 'Test Failed: objEnum[1] !== bar');

  const strEnum = _enum('foo', 'bar', 'baz');
  console.assert(typeof strEnum.foo === 'symbol', 'Test Failed: strEnum.foo is not Symbol');
}

// Run unit tests
testEnum();

有关 JavaScript 枚举和自动完成的常见问题

1. 如何确保 JavaScript 中的枚举是不可变的？
2. 您可以使用 Object.freeze() 方法来确保枚举一旦定义就不可变。
3. 什么是枚举中的双向映射？
4. 双向映射允许通过它们的键和值来访问枚举。这通常是通过使用来实现的 Object.entries() 和 flatMap() 将对象转换为键值对。
5. 为什么自动完成功能不适用于基于字符串的枚举？
6. 在 JavaScript 中，自动完成可能不适用于基于字符串的枚举，除非它们是用 as const 在 TypeScript 中，确保将它们的类型视为常量。
7. 使用有什么好处 Symbol() 对于枚举值？
8. 符号确保每个枚举值都是唯一的，从而防止大型代码库中枚举值之间发生意外冲突。
9. 如何将 TypeScript 类型安全添加到 JavaScript 枚举？
10. 通过使用自定义类型，例如 Enum<T>，您可以增强 JavaScript 枚举中的类型安全性和自动完成支持。

关于 JavaScript 枚举自动完成的最终想法

在 JavaScript 枚举中实现完全自动完成支持需要仔细处理类型和不变性。我们讨论过的技术，例如使用 对象.freeze() 和双向映射，解决了处理基于对象和基于字符串的枚举时的常见挑战。

通过实现 TypeScript 的“as const”并优化枚举的不变性，我们不仅提高了自动完成功能，还提高了代码的整体可靠性。这些实践使开发人员能够创建更高效​​且无错误的应用程序，确保枚举在小型和大型项目中都能按预期运行。