Javascript 如何获得类型化组件属性的代码完成？

我使用react和mobx状态树，并使用

@inject

将存储注入到我的组件中。因此，最后我通过组件内部的

this.props.uiStore

访问存储

不幸的是，VisualStudio代码无法推断我的存储的类型，因此我没有任何属性的代码完成。 我想知道是否可以使用

jsDoc

来实现这一点（因为它对方法非常有效），但找不到方法。 我在想一些大致如下的事情：

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

---

但是它不起作用。

从类型脚本类型声明到mobx状态树模型定义是不可能的。但是，如果编写mobx状态树模型定义，则可以从中生成TypeScript类型；类型。因此，您必须转换现有接口，但至少不必维护相同信息的两个副本

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

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

export default uiStore;

从“mobx状态树”导入{types，Instance}；
const uiStore=types.model({
prop:types.string，
});
导出类型IuiStore=实例；
导出默认uiStore；

您可以使用JSDoc使Visual Studio代码正确推断React components道具，诀窍是使用

@extends{Component}

：

文件：store.js（这只是一个示例文件，演示intellinsense如何捕获定义，但任何对象、类、类型定义，甚至json都可以。如果您可以导入并反映它，您可以将其链接到组件道具）

文件：test.jsx

    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import UiStore from './store';

    /**
     * @typedef Props
     * @prop {UiStore} uiStore
     */

    /**
     * @extends {Component<Props, {}>}}
     */
    export default class DeviceMirror extends Component {
        static propTypes = {
            // not needed for intellisense but prop validation does not hurt
            uiStore: PropTypes.instanceOf(UiStore),
        }
        /**
         * @param {Props} props - needed only when you don't write this.props....
         */
        constructor(props) {
            super(props);
            this.s = props.uiStore.str;
        }
        render() {
            const { uiStore } = this.props;
            return <p>{uiStore.str}</p>;
        }
    }

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“/store”导入UiStore；
/**
*@typedef道具
*@prop{UiStore}UiStore
*/
/**
*@extends{Component}
*/
导出默认类DeviceMirror扩展组件{
静态类型={
//intellisense不需要，但道具验证不会造成伤害
uiStore:PropTypes.instanceOf（uiStore），
}
/**
*@param{Props}Props-仅当您不编写此文件时才需要。Props。。。。
*/
建造师（道具）{
超级（道具）；
this.s=props.uiStore.str；
}
render（）{
const{uiStore}=this.props；
返回{uiStore.str}
；
}
}

VSCode可以使用这种声明，并将提供intellisense和代码完成。从组件文件内部和外部：

---

对于同样在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 { ....

从“../stores/DbStore”导入数据库存储
从“../stores/UiStore”导入UiStore
/**
*@typedef道具
*@prop{typeof UiStore.Type}UiStore
*@prop{typeof DbStore.Type}DbStore
*@prop{boolean}editMode
*@prop{Array}历史记录
* ....
*/
/**
*@extends{React.Component}
*/
@注入（'dbStore'）
@注入（'uiStore'）
@观察者
类TestView扩展了React.Component{。。。。

它对Webstorm也不太管用。我感觉到了你的痛苦。MST商店的自动完成功能对你有用吗？@jayarjo是的，你可以详细说明一下吗？我该如何在我的组件中使用

IuiStore

来完成代码？

IuiStore

可以是一个o型接口，使用的方法就是分配给你r在组件内部添加一个新变量，比如

让myProps:uiType=this.props.uiStore

。我个人更喜欢在索引文件中使用decorators，并将组件作为纯函数保存，这样测试起来就很容易，而且不需要与任何状态管理库绑定。很高兴知道这一点！但是，我需要重新定义所有属性（我已经用MST格式定义了它），对吗？不，只要React组件外部已经可以完成所需类型的代码，就不必重新定义任何内容。这只是一个用@extends{component}正确分配参数化类组件（或PureComponent）

的泛型类型的问题

。您甚至可以使用对象实例作为类型定义。请注意，您可以跳过状态定义，将空对象

{}

作为占位符。

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 { ....