15

我正在使用 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

但它不起作用。

4

3 回答 3

9

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

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

    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 可以使用这种声明，并将提供智能感知和代码完成。从组件文件的内部和外部：

vscode的截图

于 2019-03-07T15:03:31.953 回答
3

没有办法从 TypeScript 类型声明到 mobx-state-tree 模型定义。但是，如果您编写 mobx-state-tree 模型定义，则可以从中生成 TypeScript 类型；使用 MST类型。所以你必须转换你现有的接口，但至少你不必维护相同信息的两个副本。

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

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

export default uiStore;
于 2019-03-07T14:08:03.960 回答
0

对于那些也使用 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 { ....
于 2020-05-18T10:04:54.093 回答