유형 스크립트 열거값을 사용하여 새 유형 작성

유형 스크립트 열거값을 사용하여 새 유형 작성

다음과 같은 시나리오가 있습니다.

enum FieldsMap {
  User = "user-name",
  Password = "user-password",
  Country = "user-country"
}

type Fields = "user-name" | "user-password" | "user-country";

당신이 볼 수 있듯이.Fields는 의값반 하있습다니의 .FieldsMap할 수 있는 방법이 있습니까?Fields의 값을 사용할 수 있습니다.FieldsMap반복을 피하기 위해?또한, 저는 사용하고 있습니다.FieldsMap한 사람으로서enum여기서, 하지만 필요하다면 문자열을 최대한 사용하지 않도록 변경할 수 있습니다.

const onChangeHandler = (key: Fields, value: string) => {
  switch (key) {
    case FieldsMap.User:
      // do something with `value`
      break;
    case FieldsMap.Password:
      // do something with `value`
      break;
    case FieldsMap.Country:
      // do something with `value`
      break;
  }
};

TS4.1+에 대한 업데이트: 다른 답변이 지적했듯이 이제 템플릿 리터럴 유형을 사용하여 값의 문자열 표현을 가져올 수 있습니다.FieldsMap숫자:

type Fields = `${FieldsMap}`;
// type Fields = "user-name" | "user-password" | "user-country"

하지만 이것이 실제로 필요한지 확인하는 것이 중요합니다. 일반적인 사용 사례는enum자체에 을 원하지 입니다. s 실 제 문 리 값 자 럴 대 체 의 에 것 크 입 니 다 는 원 않 다 는 지 하 게 을 는 성 존 한 자 터 열 ▁named ▁s 니 ▁s 다 ▁an ▁enum 입 ▁for 것 ▁literal ▁them ▁that ▁you ▁values ▁is 는 ▁don ▁much ▁string 는 ency ▁on 다 ;는FooFoo이미 열거형 값의 합집합이지만 명목상으로 처리되므로 실수로 대신 문자열을 사용할 수 없습니다.값 대신 문자열을 사용하려면 다음을 사용하지 않을 수 있습니다.enum우선 문자열 리터럴이 들어 있는 개체를 사용해야 합니다.요점은 이것을 사용하기 전에 이것이 당신이 정말로 원하는 것인지 확인하는 것입니다.

---

그냥 답으로 쓰는 것만으로도...TypeScript에서 열거형은 추가 유형을 정의할 필요 없이 기본적으로 이미 사용자가 찾고 있는 동작을 가지고 있습니다.

즉, 다음 열거형 정의입니다.

enum Fields {
  User = "user-name",
  Password = "user-password",
  Country = "user-country"
}

이름이 지정된 값을 범위로 가져옵니다.Fields키가 다음과 같은 속성으로User,Password,그리고.Country그리고 그 가치들은."user-name","user-password",그리고."user-country"아시다시피, 각각.다음과 됩니다.

const x = Fields.User; // makes it to the emitted JS

값과 유사합니다.

const FieldsLike = {
  User: "user-name",
  Password: "user-password",
  Country: "user-country"
} as const;

const xLike = FieldsLike.User; // makes it to the emitted JS;

하지만 이는 또한 범위를 넓히고 있습니다.Fields이것은 속성 값의 합과 같습니다.Fields물건.이 유형은 JS가 방출될 때 유형 시스템의 나머지 부분과 함께 지워지지만 다음과 같이 유형 주석을 통해 IntelliSense를 사용하여 설계 시 액세스할 수 있습니다.

const y: Fields = x; // the "Fields" annotation is the type

그리고 유형과 유사합니다.

type FieldsLike = (typeof FieldsLike)[keyof typeof FieldsLike];
// type FieldsLike = "user-name" | "user-password" | "user-country"

const yLike: FieldsLike = xLike; // the "FieldsLike" annotation is the type

이것은 당신이 찾고 있는 유형입니다. 아래를 참조하십시오.

참고로 열거형은 각 열거형 멤버에 대해 내보낸 유형이 있는 네임스페이스 역할도 합니다.

const z: Fields.Password = Fields.Password; // type and value

(그래서))Fields.Password왼쪽은 유형의 이름이고, 반면에Fields.Password오른쪽은 값의 이름입니다.따라서 다음과 같이 액세스할 수 있는 유형은Fields네임스페이스와 유사합니다.

namespace FieldsLike {
  export type User = typeof FieldsLike.User;
  export type Password = typeof FieldsLike.Password;
  export type Country = typeof FieldsLike.Country;
}

const zLike: FieldsLike.Password = FieldsLike.Password; // type and value

---

휴, 그것은 단지 그것을 사용하는 것을 의미합니다.enum Fields { ... }정의는 우리에게 행동을 줍니다.const FieldsLike = ...,type FieldsLike = ...,그리고.namespace FieldsLike대번에

뒤로 물러나요...당신이 찾고 있던 유형, 아래의 모든 속성의 결합.Fields열거형, 이미 이름이 지정된 유형입니다.Fields(좋아요, 당신의 이름을 바꿨습니다.FieldsMap로.Fields), 직접 사용할 수 있습니다.

const onChangeHandler = (key: Fields, value: string) => {
  switch (key) {
    case Fields.User:
      // do something with `value`
      break;
    case Fields.Password:
      // do something with `value`
      break;
    case Fields.Country:
      // do something with `value`
      break;
  }
};

좋아요, 도움이 되길 바랍니다.행운을 빕니다.

코드 링크

템플릿 리터럴 유형을 릴리스한 후에는 다음을 사용할 수 있습니다.

type Fields = `${FieldsMap}` // "user-name" | "user-password" | "user-country"

언급URL : https://stackoverflow.com/questions/56841134/use-typescript-enum-values-to-create-new-type