Question

我正在使用react和mobx-state-tree，并且我使用@inject将存储注入到我的组件中。因此，最后我通过组件内部的this.props.uiStore访问商店。

不幸的是，Visual Studio Code无法推断出商店的类型，因此我没有这些属性的任何代码完成。我想知道是否可以为此使用jsDoc（因为它可以很好地用于方法），但是找不到方法。我在想一些类似的事情：

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

但这不起作用。

Answer 1

您可以使用JSDoc使Visual Studio Code正确地推断React组件道具，诀窍是使用@extends {Component<{type def for props}, {type def for state}>}}：

文件：store.js （这只是一个示例文件，用于演示intellinsense如何捕获定义，但是任何对象，类，typedefiniton甚至可能还有json都可以。如果可以将其导入并反映出来，您可以将其链接到Component props）

    class CustomClass {
        // ...
    }
    // Note: exporting an object would also do
    export default class UiStore {
        /**
         * @type {string} this is a string
         */
        str = null
        /**
         * @type {number} this is a number
         */
        num = null
        /**
         * @type {Date} this is a Date
         */
        dat = Date
        /**
         * @type {CustomClass} this is a CustomClass
         */
        cls = null
    }

文件：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>;
        }
    }

VSCode可以使用这种声明，并提供智能感知和代码完成功能。从组件文件的内部和外部：

Answer 2

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

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

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

export default uiStore;

Answer 3

对于那些也与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 { ....

如何为键入的React组件属性获取代码完成？

3 个答案: