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

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

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

Ответы

Ответ 1

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

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

Ответ 2

Невозможно перейти от объявления типа 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;