字符串文字类型,在Typescript中包含变量

Question

我的代码:

export const LOAD_USERS = 'LOAD_USERS';
export const CREATE_USER = 'CREATE_USER';
export interface ACTION {
  type: string,
  payload: any
}

我想将ACTION.type限制为'LOAD_USERS'或'CREATE_USERS'.我可以通过String Literal来做到这一点type: 'LOAD_USERS'|'CREATE_USERS'.但不能用变量来做type: LOAD_USERS | CREATE_USERS.我的编辑器提示"找不到名字'LOAD_USERS'".有没有办法使用变量来做到这一点？在多个地方输入相同的字符串时可能会出现拼写错误.

Answer 1

如果要确保变量中的字符串是操作类型,则应使用类型别名并使用该类型显式键入变量:

export type ActionNames = 'LOAD_USERS' | 'CREATE_USER';
export const LOAD_USERS: ActionNames = 'LOAD_USERS';
export const CREATE_USER: ActionNames = 'CREATE_USER';

export interface ACTION {
  type: ActionNames;
  payload: any;
}

如果变量中的字符串与其中一个字符串不匹配ActionTypes,那么您将收到一个错误,这是为了防止错误.例如,这会出错:

export type ActionNames = 'LOAD_USERS' | 'CREATE_USER';
export const LOAD_USERS: ActionNames = 'LOAD_USERS_TYPO'; // error, good

Answer 2

您可以使用typeof运算符,它返回推断类型:

export const LOAD_USERS = 'LOAD_USERS';
export const CREATE_USER = 'CREATE_USER';
export interface ACTION {
  type: typeof LOAD_USERS | typeof CREATE_USER,
  payload: any
}

Answer 3

从 TypeScript 2.4 开始，您可以将枚举与字符串成员一起使用。枚举定义了一组命名常量。

export enum UserActions{
    LOAD_USERS = "LOAD_USERS",
    CREATE_USER = "CREATE_USER"
}

export interface ACTION {
    type: UserActions,
    payload: any
}