在 typescript 中重新分配属性名称

Question

我有一个组件，我想用它来为传递给它的各种 object 显示相同的东西。 问题是，对象具有不同的属性名称。 相同的属性类型，但名称不同。

我很好奇是否可以正确键入此组件，以便我可以将其重用于这些类似的对象，这些对象只是具有不同的道具名称，但 function 的方式相同。

有没有办法重新分配一个属性，使其始终具有相同的名称，或者是否应该确保 object 以正确的属性名称传递？

或者，有没有一种奇特的方法来利用它，所以如果我添加一个形状与其类型相似的第 3、4、5 个 object，就可以使用该组件？

我有一种感觉，我做错了，它会从其他开发者那里获得一些关注。

下面的超级简化示例希望能阐明我正在做的事情：

type Obj1_Type = {
    id: number;
    packageId: number;
    value: string;
};

type Obj2_Type = {
    id: number;
    otherId: number;
    value: string;
};

type ComponentType =
    | {
          variant: "obj1";
          obj: Obj1_Type;
      }
    | {
          variant: "obj2";
          obj: Obj2_Type;
      };

const MyComponent = (item: ComponentType) => {
    return <>{item.obj.packageId}</>; // <-- error here as 'packageId' is not a property on both objects.
};

Answer 1

因为 TS 编译器无法知道您使用的是哪种类型，请尝试以下操作：

const MyComponent = (item: ComponentType) => {
  return <>{item.variant === 'obj1' && item.obj.packageId}</>;
};