향상된 자동 완성 기능을 위해 JavaScript Enum 구현 개선

더 나은 자동 완성 지원을 위해 JavaScript Enum 구현 개선

이 접근 방식은 바닐라 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를 사용한 Enum 구현

이 접근 방식은 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>;

단위 테스트를 통한 바닐라 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. JavaScript 열거형에 TypeScript 유형 안전성을 어떻게 추가할 수 있나요?
10. 다음과 같은 사용자 정의 유형을 사용하여 Enum<T>을 사용하면 JavaScript 열거형의 유형 안전성과 자동 완성 지원을 모두 향상할 수 있습니다.

JavaScript Enum 자동 완성에 대한 최종 생각

JavaScript 열거형에서 완전한 자동 완성 지원을 얻으려면 유형과 불변성을 주의 깊게 처리해야 합니다. 우리가 논의한 기술(예: 사용) 객체.동결() 및 양방향 매핑을 통해 객체 기반 및 문자열 기반 열거형을 모두 처리할 때 발생하는 일반적인 문제를 해결합니다.

TypeScript의 "as const"를 구현하고 불변성을 위해 열거형을 최적화함으로써 자동 완성뿐 아니라 코드의 전반적인 안정성도 향상됩니다. 이러한 방법을 통해 개발자는 더 효율적이고 오류 없는 애플리케이션을 만들 수 있으며, 소규모 프로젝트와 대규모 프로젝트 모두에서 열거형이 의도한 대로 작동하도록 보장할 수 있습니다.