I have this object:

export const gridColumns = {
  "3": 264,
  "4": 360,
  "6": 360,
  "8": 744,
  "12": 1128,
};

TypeScript type:

column: {
    3: string;
    4: string;
    8: string;
    12: string;
  };

Theme object:

export const widths: Widths = {
  column: {
    "3": "264px",
    "4": "360px",
    "8": "744px",
    "12": "1128px",
  },
};

Now I want this object and reuse it in my theme (React and TypeScript).

But from my theme value I need the value as a string like ${theme.widths.column[8]}, which returns "744px".

How do I re-use my column object and use it in the other object in a smart and clean way?

I need both objects to use in my code (as number and as string).