是否可以使用 React + Typescript 在 object 阵列内扩展接口？

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.

Answer 1

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',
});