Is it possible to extend an interface inside an object array with React + Typescript?

Question

I have two interfaces:

Interface 1:

interface ILineItemProps {
    state: 'OPENED' | 'COMPLETED' | 'CANCELLED' | 'PENDING';
}

Interface 2:

interface IProps {
    steps: [
        {
            key: string;
            title: string;
        }
    ];
}

Interface 1 must add its object, in this case the state, inside the object of interface 2, thus:

[{
key: string;
title: string;
state: interface1
}]

I've tried it in several ways:

[{
key: string;
title: string;
} & Interface1]

Array<{
key: string;
title: string;
} & Interface1>

But I could not.

did you try to push() it? or seperate inside the array with comma instead of &? — Eldshe
– Eldshe, Commented Dec 29, 2021 at 17:52

Charles Fries · Accepted Answer · 2021-12-29 18:44:32Z

0

Try this:

interface ILineItemProps {
  state: 'OPENED' | 'COMPLETED' | 'CANCELLED' | 'PENDING';
}

type Step = {
  key: string;
  title: string;
} & ILineItemProps;

interface IProps {
  steps: Step[];
}

// test:

const iProps = {
  steps: [] as Step[],
};

iProps.steps.push({
  key: 'a',
  title: 'b',
  state: 'OPENED',
});

answered Dec 29, 2021 at 18:44

Charles Fries

3652 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Is it possible to extend an interface inside an object array with React + Typescript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related