React+TypeScript+Redux问题：外部库initForm动作入参类型定义

方法1：封装带类型的动作调用函数 #

在组件或工具文件里给initForm套一层类型明确的封装函数，强制约束入参：

// 先定义initForm的入参类型
type InitFormParams = {
  formId: string;
  initialValues: {
    name: string;
    // 按需补充其他字段类型
  };
};

// 封装带类型校验的调用逻辑
const dispatchInitForm = (dispatch: AppDispatch, params: InitFormParams) => {
  dispatch(initForm(params.formId, params.initialValues));
};

// 组件内使用
const dispatch = useDispatch<AppDispatch>();
dispatchInitForm(dispatch, { formId: "my_form", initialValues: { name: "John" } });

方法2：单调用场景直接加类型标注 #

如果只是个别组件用到，直接给入参或动作加类型断言：

const dispatch = useDispatch<AppDispatch>();

// 方式1：给入参单独加类型
const formId: string = "my_form";
const initialValues: { name: string } = { name: "John" };
dispatch(initForm(formId, initialValues));

// 方式2：给动作返回值加类型断言
type InitFormAction = ReturnType<typeof initForm>;
dispatch(initForm("my_form", { name: "John" }) as InitFormAction);

方法3：全局扩展AppDispatch类型 #

如果多个组件都要调用这个动作，临时扩展AppDispatch让它兼容该动作类型：

// 在AppDispatch的定义文件中
import { initForm } from '外部库路径';

type InitFormAction = ReturnType<typeof initForm>;
// 扩展原有Dispatch类型，加入initForm动作的类型支持
export type AppDispatch = typeof store.dispatch & ((action: InitFormAction) => void);

之后组件里用useDispatch<AppDispatch>()，TS会自动识别initForm的入参类型。

以上方案都是应用层的临时适配，等后续给外部库写完声明文件后，直接移除这些代码即可。

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