title: Re-assigning property names in typescript
body: <p>I have a component which I want to use to display the same thing for various object which are passed into it.  Thing is, the objects have different property names.  Same property types, but the names are different.</p>
  <p>I'm curious if it's possible to correctly type this component out so I can reuse it for these similar objects which just have different prop names but function the same way.</p>
  <p>Is there a way to maybe re-assign the one property so it's always the same name, or should it be the job of the usage to ensure the object is passed with the correct property names?</p>
  <p>Or, is there a fancy way to make use of this so the component could be used if I add a 3rd, 4th, 5th object with a similar shape to their types?</p>
  <p>I have a feeling that I'm going about this wrong and it's going to gain some facepalms from other devs.</p>
  <p>Super simplified example below to hopefully shed light on what I'm going on about:</p>
  <pre><code>type Obj1_Type = {
      id: number;
      packageId: number;
      value: string;
  };
  
  type Obj2_Type = {
      id: number;
      otherId: number;
      value: string;
  };
  
  type ComponentType =
      | {
            variant: &quot;obj1&quot;;
            obj: Obj1_Type;
        }
      | {
            variant: &quot;obj2&quot;;
            obj: Obj2_Type;
        };
  
  const MyComponent = (item: ComponentType) =&gt; {
      return &lt;&gt;{item.obj.packageId}&lt;/&gt;; // &lt;-- error here as 'packageId' is not a property on both objects.
  };
  </code></pre>