Flow中如何用字符串常量定义Redux Action Creator的type类型？

你遇到的问题其实是Flow对字符串常量的类型推断默认是string，而非具体的字面量类型，所以直接用actions.SET_USER_TOKEN作为type属性的类型会报错。不用非得写重复的字面量字符串，有两种常用的解决方法：

方法一：将常量定义为字面量类型 #

修改你的action常量定义，明确指定它们为字面量类型，这样Flow就能识别出具体的字符串值：

// @flow
export const SET_USER_TOKEN: "SET_USER_TOKEN" = "SET_USER_TOKEN";
export const SET_TOKEN_IN_COOKIES: "SET_TOKEN_IN_COOKIES" = "SET_TOKEN_IN_COOKIES";

之后在定义Action类型时，就可以直接引用常量的类型了：

import * as actions from "./actions";

type SetUserTokenAction = {
  type: typeof actions.SET_USER_TOKEN,
  token: string
};

type SetTokenInCookiesAction = {
  type: typeof actions.SET_TOKEN_IN_COOKIES,
};

这种方法最直接，能让你的常量和Action类型保持强关联，后续修改常量值时，类型也会自动同步。

方法二：从导出的常量对象中提取单个字面量类型 #

如果你不想修改原有常量的定义，可以通过Flow的类型工具来提取单个常量的字面量类型：

首先保持原有常量定义不变：

// @flow
export const SET_USER_TOKEN = "SET_USER_TOKEN";
export const SET_TOKEN_IN_COOKIES = "SET_TOKEN_IN_COOKIES";

然后在定义Action类型时，使用$ElementType工具获取指定常量对应的字面量类型：

import * as actions from "./actions";

type SetUserTokenAction = {
  type: $ElementType<typeof actions, 'SET_USER_TOKEN'>,
  token: string
};

$ElementType<typeof actions, 'SET_USER_TOKEN'>会自动解析出SET_USER_TOKEN常量对应的具体字符串字面量类型，相当于"SET_USER_TOKEN"，但它是从常量中动态提取的，避免了重复写字面量字符串。

另外，如果你需要定义所有Action的联合类型，也可以用$Values<typeof actions>来获取所有常量的字面量类型集合：

type AllActionTypes = $Values<typeof actions>;

这样后续新增常量时，AllActionTypes会自动包含新的类型值。

内容的提问来源于stack exchange，提问作者Tomasz Mularczyk