首页 > 解决方案 > 如何同步从 Web API 后端发送到 React/Redux 前端的对象类型

问题描述

我在 .net 上为我的应用程序编写了一个后端,它为我提供了 CRUD 操作。例如,POST 操作的响应是全新的项目对象:

{"Id":"7575c661-a40b-4161-b535-bd332edccc71","Text":"as","CreatedAt":"2018-09-13T15:29:52.7128732+00:00","LastChange":"2018-09-13T15:29:52.7128732+00:00"}

现在我需要在我的前端使用这个 ID(重写我在前端创建的临时 ID,直到我收到上传成功的确认)。当我键入我的 thunk 动作“我认为它是正确的”时,打字稿出现了问题:

export const uploadItem = (fetch: (text: string) => Promise<Item>) =>
(generateId: () => ItemId) =>
 (text: string) =>
  async (dispatch: Dispatch<ThunkAction<IAction, IAppState, void>>): Promise<IAction> => {
    const id = generateId();
    try {
      dispatch(addItem(id, text));
      const itemWithOfficialId = await fetch(text);
      dispatch(synchronizeItemId(id, itemWithOfficialId.id));
      return dispatch(setAsSynchronized(itemWithOfficialId.id));
    } catch {
      return dispatch(requestFailedForItem(id, errorMessageTypes.UPLOAD, 'Failed to upload. '));
    }
  };

我看到的问题在第一行:

fetch: (text: string) => Promise<Item>

这迫使我这样做:

itemWithOfficialId.id

因为我Item只有财产id,我需要提取Id. 但是打字稿不允许我将其更改为itemWithOfficialId.Id.

我知道我可以制作一个新的 Item 模型,它包含从服务器返回的属性并像使用它一样使用它Promise<ItemFromServer>,但我觉得这有点俗气,我想知道是否有另一种方法可以在不创建新的情况下转换它们表示同一对象?

标签: reactjstypescriptasp.net-web-apiredux

解决方案


如果您有两个具有不同属性集的对象,即使属性名称只是大小写不同,我认为您也无法绕过声明两种不同的类型。但是,您可以使用诸如TypewriterItemFromServer之类的工具从服务器代码中自动生成声明。


推荐阅读