我可以在不更改界面的情况下为 React Typescript 中的状态添加多个变量吗？

Question

I am trying to add a variable to the state of a react component. This is how the component looks:

export class Item extends React.Component<{}, State>{
    now: Date;
    constructor(props: any) {
        super(props);
        this.state = {
            tab: Tabs.example,
            e1: {},
            e2: {},
            e3: {},
            e4: {},
            e5: {},
            e6: {},
            e7: {},
            e8: {},
            e9: {}
        }
        this.now = new Date();

    }

The interface State is already defined as

interface State {
tab: Tabs
e1: any
e2: any
e3: any
e4: any
e5: any
e6: any
e7: any
e8: any
e9: any
}

I would like to add another object foo to the state of my component 'Item' but I cannot change the interface. Is there a way to add foo: any to the state variables without messing up the interface?

Answer 1

You could try extending the interface so that you can maintain type safety/strictness - which helps devs (or at least me) stay sane with javascript and reap the benefits of typescript

interface StateWithFoo extends State{
  foo: any
}

export class Item extends React.Component<{}, StateWithFoo>{

There are other ways if extending isn't an option; you could try using Partial or other TypeScript features, each coming with some tradeoff.

I lead with the extending interface approach since it maintains type safety/strictness, but if that doesn't work we can discuss other options