Mobx: Intellisense for typed stores in ReactJS context

[giacomorebonato]

This is the function to get my global store object

import AuthStore from './AuthStore'
import NotificationsStore from './NotificationsStore'
import SiteStore from './SiteStore'
import UIStore from './UIStore'


export function getStores (data): IStores {
    const notificationsStore = new NotificationsStore()

    const stores = {
        notificationsStore,
        authStore: new AuthStore(notificationsStore, data['authStore']),
        uiStore: new UIStore(),
        siteStore: new SiteStore(data['siteStore'])
    }

    return stores
}

And this is how I inject the stores into ReactJS context (I am using also React Router)

<ContextProvider context={{stores}}>
    <RouterContext {...props} />
</ContextProvider>

What would be your approach to access this.context.stores inside your ReactJS component and still having typings features?

[mweststrate]

The standard react .d.ts files don't provide a type parameter to specify the type of context, so you can't do much in general as upcasting manually. For mobx-react's inject specifically see this example (inject converts context stores to props, so that can be typed): https://github.com/mobxjs/mobx-react#strongly-typing-inject

[macouella]

We are currently working on a typescript library, consumed by JS projects... After reading up a bit, apparently, you can utilise JSDoc to add typings to vscode projects.

If you have Typescript definition files available for a project and are requiring VSCode intellisense for a JS project, you can use JSDoc comments to help VSCode do the mapping :)

VSCode typescript intellisense support for JS files snippet follows:

@inject('yourStore')
@observer
class MyComponent extends React.Component {

  /** @type {import('./yourTypeFile/locationRelative/toThis/File').IYourDefinition} */
  store // we're temporarily typing store to your specified definition file

  constructor(props){
    super(props)
    this.store = this.props.store
  }

  render() {
    this.store.doSomething() // hurray, there are typings now!
    return <div>{this.store.yourProperty}</div>
  }
}

An alternative is to also use @augments from JSDoc. Refer to the docs below:
https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.