객체 배열에 대한 TypeScript 열거 형

다음과 같이 정의 된 열거 형이 있습니다.

export enum GoalProgressMeasurements {
    Percentage = 1,
    Numeric_Target = 2,
    Completed_Tasks = 3,
    Average_Milestone_Progress = 4,
    Not_Measured = 5
}

그러나 아래와 같이 API에서 객체 배열 / 목록으로 표시하고 싶습니다.

[{id: 1, name: 'Percentage'}, 
 {id: 2, name: 'Numeric Target'},
 {id: 3, name: 'Completed Tasks'},
 {id: 4, name: 'Average Milestone Progress'},
 {id: 5, name: 'Not Measured'}]

이 작업을 수행하는 쉽고 기본 방법이 있습니까? 아니면 열거 형을 int와 문자열로 캐스팅하고 개체를 배열로 빌드하는 함수를 빌드해야합니까?

까다로운 부분은 TypeScript가 방출 된 객체의 열거 형을 '이중'매핑하므로 키와 값으로 모두 액세스 할 수 있다는 것입니다.

enum MyEnum {
    Part1 = 0,
    Part2 = 1
}

다음과 같이 방출됩니다.

{
   Part1: 0,
   Part2: 1,
   0: 'Part1',
   1: 'Part2'
}

따라서 매핑하기 전에 먼저 개체를 필터링해야합니다. 그래서 @Diullei의 솔루션은 정답을 가지고 있습니다. 내 구현은 다음과 같습니다.

// Helper
const StringIsNumber = value => isNaN(Number(value)) === false;

// Turn enum into array
function ToArray(enumme) {
    return Object.keys(enumme)
        .filter(StringIsNumber)
        .map(key => enumme[key]);
}

다음과 같이 사용하십시오.

export enum GoalProgressMeasurements {
    Percentage,
    Numeric_Target,
    Completed_Tasks,
    Average_Milestone_Progress,
    Not_Measured
}

console.log(ToArray(GoalProgressMeasurements));

ES8을 사용하는 경우

이 경우에만 완벽하게 작동합니다. 주어진 enum 의 값 배열을 제공합니다 .

enum Colors {
  WHITE = 0,
  BLACK = 1,
  BLUE = 3
}

const colorValueArray = Object.values(Colors); //[ 'WHITE', 'BLACK', 'BLUE', 0, 1, 3 ]

당신은 이렇게 얻을 colorValueArray것 [ 'WHITE', 'BLACK', 'BLUE', 0, 1, 3 ]입니다. 모든 키는 배열의 전반부에 있고 모든 값은 후반부에 있습니다.

이런 종류의 열거 형도 잘 작동합니다.

enum Operation {
    READ,
    WRITE,
    EXECUTE
}

그러나이 솔루션은 이와 같은 이기종 열거 형 에서는 작동하지 않습니다.

enum BooleanLikeHeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

열거 형은 런타임에 존재하는 실제 개체입니다. 따라서 다음과 같이 매핑을 되돌릴 수 있습니다.

let value = GoalProgressMeasurements.Not_Measured;
console.log(GoalProgressMeasurements[value]);
// => Not_Measured

이를 바탕으로 다음 코드를 사용할 수 있습니다.

export enum GoalProgressMeasurements {
    Percentage = 1,
    Numeric_Target = 2,
    Completed_Tasks = 3,
    Average_Milestone_Progress = 4,
    Not_Measured = 5
}

let map: {id: number; name: string}[] = [];

for(var n in GoalProgressMeasurements) {
    if (typeof GoalProgressMeasurements[n] === 'number') {
        map.push({id: <any>GoalProgressMeasurements[n], name: n});
    }
}

console.log(map);

참조 : https://www.typescriptlang.org/docs/handbook/enums.html

쉬운 솔루션. 다음 함수를 사용하여 Enum을 개체 배열로 변환 할 수 있습니다.

 buildGoalProgressMeasurementsArray(): Object[] {

    return Object.keys(GoalProgressMeasurements)
              .map(key => ({ id: GoalProgressMeasurements[key], name: key }))
 }

밑줄을 제거해야하는 경우 다음과 같이 정규식을 사용할 수 있습니다.

buildGoalProgressMeasurementsArray(): Object[] {

    return Object.keys(GoalProgressMeasurements)
              .map(key => ({ id: GoalProgressMeasurements[key], name: key.replace(/_/g, ' ') }))
 }

나는 사용한다

Object.entries(GoalProgressMeasurement).filter(e => !isNaN(e[0]as any)).map(e => ({ name: e[1], id: e[0] }));

작업을 수행하는 간단한 한 줄.

간단한 3 단계로 작업을 수행합니다
.-를 사용하여 키와 값의 조합을로드합니다 Object.entries.
-숫자가 아닌 항목을 필터링합니다 (typescript가 역방향 조회에 대한 값을 생성하므로).
-그런 다음 원하는 배열 객체에 매핑합니다.

이것은 열거 형 값의 배열을 제공합니다.

 Object.values(myEnum);

class EnumHelpers {

    static getNamesAndValues<T extends number>(e: any) {
        return EnumHelpers.getNames(e).map(n => ({ name: n, value: e[n] as T }));
    }

    static getNames(e: any) {
        return EnumHelpers.getObjValues(e).filter(v => typeof v === 'string') as string[];
    }

    static getValues<T extends number>(e: any) {
        return EnumHelpers.getObjValues(e).filter(v => typeof v === 'number') as T[];
    }

    static getSelectList<T extends number, U>(e: any, stringConverter: (arg: U) => string) {
        const selectList = new Map<T, string>();
        this.getValues(e).forEach(val => selectList.set(val as T, stringConverter(val as unknown as U)));
        return selectList;
    }

    static getSelectListAsArray<T extends number, U>(e: any, stringConverter: (arg: U) => string) {
        return Array.from(this.getSelectList(e, stringConverter), value => ({ value: value[0] as T, presentation: value[1] }));
    }

    private static getObjValues(e: any): (number | string)[] {
        return Object.keys(e).map(k => e[k]);
    }
}

위의 답변 중 어느 것도 TypeScript 열거 형의 값이 될 수있는 문자열 / 숫자의 혼합을 올바르게 처리하지 않았기 때문에 마음에 들지 않았습니다.

다음 함수는 TypeScript 열거 형의 의미를 따라 적절한 키 맵을 값에 제공합니다. 거기에서 객체 배열이나 키 또는 값만 얻는 것은 간단합니다.

/**
 * Converts the given enum to a map of the keys to the values.
 * @param enumeration The enum to convert to a map.
 */
function enumToMap(enumeration: any): Map<string, string | number> {
  const map = new Map<string, string | number>();
  for (let key in enumeration) {
      //TypeScript does not allow enum keys to be numeric
      if (!isNaN(Number(key))) continue;

      const val = enumeration[key] as string | number;

      //TypeScript does not allow enum value to be null or undefined
      if (val !== undefined && val !== null)
          map.set(key, val);
  }

  return map;
}

사용 예 :

enum Dog {
    Rover = 1,
    Lassie = "Collie",
    Fido = 3,
    Cody = "Mutt",
}

let map = enumToMap(Dog); //Map of keys to values

lets objs = Array.from(map.entries()).map(m => ({id: m[1], name: m[0]})); //Objects as asked for in OP
let entries = Array.from(map.entries()); //Array of each entry
let keys = Array.from(map.keys()); //An array of keys
let values = Array.from(map.values()); //An array of values

또한 OP가 열거 형을 거꾸로 생각하고 있음을 지적 할 것입니다. 열거 형의 "키"는 기술적으로 왼쪽에 있고 값은 오른쪽에 있습니다. TypeScript를 사용하면 RHS의 값을 원하는만큼 반복 할 수 있습니다.

먼저이 열거 형에 대한 키 배열을 얻습니다. 그런 다음 map () 함수를 사용하여 데이터를 원하는 형식으로 변환합니다. id는 키에서 가져오고 이름은 동일한 키로 enum에서 가져옵니다.

const converted = Object.keys(GoalProgressMeasurements).map(key => {
        return {
            id: GoalProgressMeasurements[key],
            name: key,
        };
    });

간단한 해결책이 있습니다. 실행 Object.keys(Enum)하면 첫 번째 슬라이스 값과 두 번째 키에 값과 키의 배열이 제공됩니다. 두 번째 슬라이스 만 반환하지 않는 이유는 다음과 같습니다. .

enum Enum {
   ONE,
   TWO,
   THREE,
   FOUR,
   FIVE,
   SIX,
   SEVEN
}
const keys = Object.keys(Enum); 
console.log(keys.slice(keys.length / 2));

내가 사용하는 올바른 타이핑이있는 간단한 기능은 다음과 같습니다.

/**
 * Helper to produce an array of enum values.
 * @param enumeration Enumeration object.
 */
export function enumToArray<T, G extends keyof T = keyof T>(enumeration: T): T[G][] {
  // tslint:disable: comment-format

  // enum Colors {
  //   WHITE = 0,
  //   BLACK = 1,
  // }
  // Object.values(Colors) will produce ['WHITE', 'BLACK', 0, 1]

  // So, simply slice the second half
  const enumValues = Object.values(enumeration);
  return enumValues.slice(enumValues.length / 2, enumValues.length) as T[G][];
}

사용 예 :

enum Colors {
  Red = 1,
  Blue = 2,
}
enumToArray(Colors)

다음과 같이 할 수 있습니다.

export enum GoalProgressMeasurements {
    Percentage = 1,
    Numeric_Target = 2,
    Completed_Tasks = 3,
    Average_Milestone_Progress = 4,
    Not_Measured = 5
}

export class GoalProgressMeasurement {
    constructor(public goalProgressMeasurement: GoalProgressMeasurements, public name: string) {
    }
}

export var goalProgressMeasurements: { [key: number]: GoalProgressMeasurement } = {
    1: new GoalProgressMeasurement(GoalProgressMeasurements.Percentage, "Percentage"),
    2: new GoalProgressMeasurement(GoalProgressMeasurements.Numeric_Target, "Numeric Target"),
    3: new GoalProgressMeasurement(GoalProgressMeasurements.Completed_Tasks, "Completed Tasks"),
    4: new GoalProgressMeasurement(GoalProgressMeasurements.Average_Milestone_Progress, "Average Milestone Progress"),
    5: new GoalProgressMeasurement(GoalProgressMeasurements.Not_Measured, "Not Measured"),
}

다음과 같이 사용할 수 있습니다.

var gpm: GoalProgressMeasurement = goalProgressMeasurements[GoalProgressMeasurements.Percentage];
var gpmName: string = gpm.name;

var myProgressId: number = 1; // the value can come out of drop down selected value or from back-end , so you can imagine the way of using
var gpm2: GoalProgressMeasurement = goalProgressMeasurements[myProgressId];
var gpmName: string = gpm.name;

필요에 따라 개체의 추가 속성을 사용하여 GoalProgressMeasurement를 확장 할 수 있습니다. 나는 더 많은 값을 포함하는 객체 여야하는 모든 열거에 대해이 접근법을 사용하고 있습니다.

문자열 값이있는 열거 형은 숫자 값이있는 열거 형과 다르므로 @ user8363 솔루션에서 숫자가 아닌 항목을 필터링하는 것이 좋습니다.

다음은 열거 형 문자열, 혼합 수에서 값을 얻는 방법입니다.

    //Helper
    export const StringIsNotNumber = value => isNaN(Number(value)) === true;
    
    // Turn enum into array
    export function enumToArray(enumme) {
      return Object.keys(enumme)
       .filter(StringIsNotNumber)
       .map(key => enumme[key]);
    }

TypeScript 스레드에서 아무도 입력이 지원되는 유효한 TypeScript 기능을 제공하지 않은 것에 놀랐습니다. @ user8363 솔루션의 변형은 다음과 같습니다.

const isStringNumber = (value: string) => isNaN(Number(value)) === false;

function enumToArray<T extends {}>(givenEnum: T) {
  return (Object.keys(givenEnum).filter(isStringNumber) as (keyof T)[]).map(
    (key) => givenEnum[key]
  );
}

나는 순서가 보장 될 수 있다고 생각하지 않는다. 그렇지 않으면 Object.entries결과의 절반을 잘라 내고 거기에서 매핑 하는 것이 충분히 쉬울 것이다 .

위의 답변에 대한 유일한 (매우 사소한) 문제는

• 문자열과 숫자 사이에 불필요한 유형 변환이 많이 있습니다.
• 항목은 단일 반복이 깨끗하고 효과적 일 때 두 번 반복됩니다.

type StandardEnum = { [id: string]: number | string; [nu: number]: string;}

function enumToList<T extends StandardEnum> (enm: T) : { id: number; description: string }[] {
    return Object.entries(enm).reduce((accum, kv) => {
        if (typeof kv[1] === 'number') {
            accum.push({ id: kv[1], description: kv[0] })
        }
        return accum
    }, []) // if enum is huge, perhaps pre-allocate with new Array(entries.length / 2), however then push won't work, so tracking an index would also be required
}

function enumKeys(_enum) {
  const entries = Object.entries(_enum).filter(e => !isNaN(Number(e[0])));
  if (!entries.length) {
    // enum has string values so we can use Object.keys
    return Object.keys(_enum);
  }
  return entries.map(e => e[1]);
}