How to create a base observer class in typescript/react?

Question

I have a common pattern my react app where I have many components that observe the same model. The code for each component looks like this:

export interface IAppModel {
    someLocation: { x: number, y: number } ;
    doSomething: () => void;
};


@inject("appModel")
@observer
export default class MyComponent
  extends React.Component<{appModel?: IAppModel}> { ... }

I would like to simplify this by declaring a base class like this:

@inject("appModel") @observer class AppComponentBase extends React.Component<{appModel?: IAppModel}> {}

export default class MyComponent extends AppComponentBase { ... }

This gives me a runtime error: Class extends value #<Object> is not a constructor or null

Not sure if/how this can work. Any ideas?

score 0 · Answer 1 · answered Dec 17 '19 at 19:00

0

I think your problem comes from IAppModel Please share it

answered Dec 17 '19 at 19:00

wyeo

33
5

OK, Added to original post – Eric Jorgensen Dec 17 '19 at 19:04
Look [provider_inject](https://mobx.js.org/refguide/inject.html) – wyeo Dec 17 '19 at 19:52

How to create a base observer class in typescript/react?

1 Answers1