Dynamic object keys in TypeScript

Issue

I have a problem when setting the type of a dynamic object in TypeScript because the object that i create has dynamic keys and three that are not.

Here’s how i defined the type for the object:

interface GraphReturns {
 [key: string]: {
    ‘%’: number,
    value: number,
   ‘%Acumulated’: number
  },
  total: number,
  ‘total_%’: number,
  date: string
}

The errors i get:

1. Property ‘total’ of type ‘number’ is not assignable to ‘string’ index type ‘{ ‘%’: number; value: number; ‘%Acumulated’: number; }’
2. Property ‘‘total_%’’ of type ‘number’ is not assignable to ‘string’ index type ‘{ ‘%’: number; value: number; ‘%Acumulated’: number; }’
3. Property ‘date’ of type ‘string’ is not assignable to ‘string’ index type ‘{ ‘%’: number; value: number; ‘%Acumulated’: number; }’ How can i fix this? Thank you!

Solution

I see only two solutions here.

This one is seemed to be more "correct", but I'm not sure you can use it

interface CallItSomehow {
    '%': number;
    value: number;
    '%Acumulated': number;
}

interface GraphReturns {
    total: number,
    'total_%': number,
    date: string
    other: Record<string, CallItSomehow>, // In this case you had to write information into another field
}

Or you can do

interface GraphReturns {
    total: number,
    'total_%': number,
    date: string
    [key: string]: {
        '%': number,
        value: number,
        '%Acumulated': number
    } | string | number,
}

Answered By - Yoskutik