TS：具有相同结构但属性可能值不同的对象的通用函数答案

【问题标题】：TS: Common function with objects that have the same structure but different possible values on a propertyTS：具有相同结构但属性可能值不同的对象的通用函数
【发布时间】：2022-12-18 18:31:00
【问题描述】：

因此，我们有一个包含多个资源的应用程序，假设我们有 Product、Cart、Whatever 资源。对于您可以创建活动的这些资源中的每一个，这里的主要思想是对于每个资源都有一个端点来创建/更新这些活动，无论您尝试更新什么资源，它看起来都是一样的。

因此，在我们的应用程序 (React) 中，我们创建了一个单一的表单来创建/更新活动，无论您要为哪个资源创建活动，相同的字段，相同的可能值，它看起来都是一样的。因此，我们只有一个组件而不是 3 个组件，以及一个处理 api 部分的通用函数。

就像是：

const { mutate } = useUniversalEditActivity(variant); // variant can be 'product', 'cart', 'whatever'

当我们要提交表格时，我们会打电话给mutate。

在那个钩子里面，有一个简单的地图：

const variantMapper = {
  product: {
    serviceAction: updateProductActivity, // simple function that wraps fetch, does the network request
  },
  cart: {
    serviceAction: updateCartActivity,
  },
  whatever: {
    serviceAction: updateWhateverActivity,
  },
};

// Using it like
const mutatingServiceAction = variantMapper[variant].serviceAction;
...
await mutatingServiceAction();

body 输入为

type UniversalEditActivityBodyType =
  | UpdateProductActivityRequestBody
  | UpdateCartActivityRequestBody
  | UpdateWhateverActivityRequestBody

当所有类型的所有属性都相同时，这会起作用，但是当 BE 更改 Whatever 资源的规范时，问题现在就开始了。因此，在请求正文有一个具有 2 个可能值的属性之前，它的类型如下：

type UpdateProductActivityRequestBody = {
  propertyWithIssues: 'a'| 'b';
}

所有 3 个看起来都一样，但是 Whatever 资源的规范更改为：

type UpdateWhateverActivityRequestBody = {
  propertyWithIssues: 'a'| 'b' | 'c' | 'd';
}

为同一属性添加 2 个更多可能的值，现在它们的外观和处理所有主体类型的通用函数内部有所不同，现在我得到了 Type '"a" | "b" | "c" | "d"' is not assignable to type '"a" | "b"'。

我有点理解这个错误，但不确定如何修复它，以便我的函数在单个属性的可能值不同时仍然适用于所有这 3 种类型。

我不知道我是否解释得很好，但这是一个更复杂的问题（我认为），所以我尽力了。如果您认为它能更好地描述我的问题，也请建议一个不同的标题。提前致谢。

【问题讨论】：

您已经显示了错误，但没有显示任何会产生此错误的代码。您已经展示了类型，但没有展示它们的使用位置。请提供一个最小的可重现示例：stackoverflow.com/help/minimal-reproducible-example
不喜欢使用as？例如 const bodyNeedToSendRequest = bodyProps as UpdateWhateverActivityRequestBody 或尝试使用 T 通用类型

标签： reactjs typescript

【解决方案1】：

如果没有带有这些功能的打字稿代码，我无法确切地知道如何修复它。据我了解你的问题，我认为你应该使用类型保护，其中使用 if 语句将允许你分离 UpdateWhateverActivityRequestBody 类型

最好提供一些您的问题的演示，然后我可以提出一些解决方案

https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types

【讨论】：