Как получить завершение кода для типизированных свойств реагирующих компонентов? - PullRequest
Новая
       13

Как получить завершение кода для типизированных свойств реагирующих компонентов?

0 голосов
/ 01 марта 2019

Я использую реагирование и дерево состояний mobx, и я использую @inject, чтобы добавить хранилища в мой компонент.В итоге я получаю доступ к хранилищу через this.props.uiStore внутри моего компонента.

К сожалению, код Visual Studio не может определить тип моего хранилища, поэтому у меня нет дополнения кода для свойств.Я задавался вопросом, смогу ли я использовать jsDoc для этого (поскольку он хорошо работает для методов), но не мог найти способ.Я думал о чем-то вроде: 

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

Но это не работает.

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Вы можете использовать JSDoc для правильного вывода кода Visual Studio на реквизиты компонентов React. Хитрость заключается в использовании @extends {Component<{type def for props}, {type def for state}>}}:

file: store.js (это всего лишьфайл примера, чтобы продемонстрировать, как intellinsense будет перехватывать определения, но подойдет любой объект, класс, определение типа и, возможно, даже 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
    }

file: 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 может использовать такого рода объявления и будет предлагать intellisense и завершение кода.как внутри, так и снаружи файла компонента:

screenshot of vscode

0 голосов
/ 07 марта 2019

Нет способа перейти от объявления типа TypeScript к определению модели дерева состояний mobx.Однако, если вы напишите определение модели дерева состояний mobx, вы сможете сгенерировать тип 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;
...