web-dev-qa-db-ja.com

タイプされた反応コンポーネントのプロパティのコード補完を取得する方法

ReactとMobx-State-Treeを使用しています。@injectを使用して、ストアをコンポーネントに注入します。そのため、最後に、私のコンポーネントの内側のthis.props.uiStoreを介してストアにアクセスします。

残念ながら、Visual Studioコードは私の店の種類を推測することはできませんので、プロパティのコード補完はありません。 jsDocを使うことができるかどうか疑問に思いました（メソッドはかなりよく機能するので）、方法が見つかりませんでした。私は次の行に沿って何かを考えていました：

export default class DeviceMirror extends React.Component {
  /**
   * @namespace
   * @property {object}  props
   * @property {UiStore}  props.uiStore
   */
  props

しかしそれはうまくいきません。

javascriptreactjsmobx-state-tree
13
stoefln

TypeScript型宣言からMobX-State-Treeモデル定義に行く方法はありません。ただし、MobX-State-Treeモデル定義を作成すると、それからTypesScriptの種類を生成できます。 MSTを使用 タイプ。それであなたはあなたの既存のインターフェースを変換する必要があるでしょうが、少なくとも同じ情報の2つのコピーを維持し続ける必要はありません。

import { types, Instance } from 'mobx-state-tree';

const uiStore = types.model({
  prop: types.string,
});
export type IuiStore = Instance<typeof uiStore>;

export default uiStore;
 _
3
victor zadorozhnyy

MSTストアでも機能するあなたのために、ここではVisual Studioコードでコード補完を取得する方法です。

import DbStore from '../stores/DbStore'
import UiStore from '../stores/UiStore'    

/**
 * @typedef Props
 * @prop { typeof UiStore.Type } uiStore
 * @prop { typeof DbStore.Type } dbStore
 * @prop { boolean } editMode
 * @prop { Array } history
 * ....
 */
/**
 * @extends {React.Component<Props, {}>}}
 */
@inject('dbStore')
@inject('uiStore')
@observer
class TestView extends React.Component { ....
 _
0
stoefln