extend and modify nested typescript interface

Question

how can I add to the object in datasets[0]?


interface ChartState {
    labels: string[];
    datasets: [
        {
            label: string;
            backgroundColor: string[] | string;
            hoverBackgroundColor: string[] | string;
            data:  (string|number)[];
        }
    ];
}

export interface PieCharState extends ChartState {}

what I would like to add:

export interface BarCharState extends ChartState{
  datasets[0].barThickness: number;
}

** I know thats not how it spouse to be done (specifing the index etc) but thats the goal. Thanks for the help!

DAG · Accepted Answer · 2020-10-07 09:23:31Z

3

You can define your new type by referencing and extending your dataset type like this:

First, extract the dataset type:

type _dataSetType = ChartState['datasets'][0];

then define your new dataset type for the barchart:

type _barChartDataSetType = _dataSetType & {
   barThickness: number;
}

Finally define your BarChartState:

export type BarCharState = ChartState & {
  datasets: Array<_barChartDataSetType>
}

which allows you do use it as expected:

const test: BarCharState = {
   labels: ['foo', 'bar'],
   datasets: [
      {
         label: 'foo',
         backgroundColor: '#fefefe',
         hoverBackgroundColor: '#ffffff',
         data: ['a', 'b'],
         barThickness: 3,
      },
   ]
}

Full Typescript Playground Example

answered Oct 7, 2020 at 9:23

DAG

7,0444 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

extend and modify nested typescript interface

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related