使用 Typescript 枚举值创建新类型

Question

I have the following scenario:

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

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

as you can see Fields is repeating the values of FieldsMap , is there a way that Fields can use the values of FieldsMap in order to avoid repetition?. Also, I'm using FieldsMap as an enum here, but I can change that if necessary, I'm just trying to avoid using strings as much as possible:

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;
  }
};

Answer 1

模板文字类型发布后，您可以使用：

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

Answer 2

Just writing this out as an answer... in TypeScript, enums essentially already have the behavior you're looking for without needing to define any additional types.

That is, the following enum definition:

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

brings into scope a value named Fields , with properties whose keys are User , Password , and Country , and whose values are "user-name" , "user-password" , and "user-country" , respectively, as you know. This value makes it to runtime, as in:

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

and is similar to the value:

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

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

But it also brings into scope a type named Fields , which is equivalent to the union of the property values in the Fields object. This type is erased with the rest of the type system when JS is emitted, but can be accessed at design time via type annotations and using IntelliSense, as in:

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

and is similar to 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

This is the type you're looking for; see below.

By the way, the enum also acts as a namespace with exported types for each enum member:

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

(so the Fields.Password on the left is the name of a type , while the Fields.Password on the right is the name of a value ). Thus the types accessible under Fields are similar to the namespace:

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

---

Whew, that means just using the enum Fields { ... } definition give us the behavior of const FieldsLike = ... , type FieldsLike = ... , and namespace FieldsLike all at once.

Let's back up... the type you were looking for, the union of all properties under the Fields enum, is already a type named Fields . (Okay, I changed the name of your FieldsMap to Fields ), and you can use it directly:

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;
  }
};

Okay, hope that helps. Good luck!

Link to code