javascript - React props intellisense 与 ASP .NET Core

Question

我正在尝试获取 React Prop 的智能感知。之前，我会将我的 ViewModel 传递给 Razor View (.cshtml)。 @model 命名空间.WeatherVM。然后我可以轻松访问所有可用属性，例如 @Model.TemperatureF。 Intellisense 会弹出并让我知道可以访问的内容。

在 React 中，我想做同样的事情。在我的 VM 中，如果我有 40 个属性，我需要有一个智能感知或可以显示所有可用属性的东西。

假设我有这样的东西:

function renderForecastsTable(props) {
    return (
        <table className='table'>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Temp. (C)</th>
                    <th>Temp. (F)</th>
                    <th>Summary</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {props.forecasts.map(forecast =>
                    <tr key={forecast.dateFormatted}>
                        <td>{forecast.dateFormatted}</td>
                        <td>{forecast.temperatureC}</td>
                        <td>{forecast.temperatureF}</td>
                        <td>{forecast.summary}</td>
                    </tr>
                )}
            </tbody>
        </table>
    );
}

我如何让智能感知告诉我 Prop 有预测？或者告诉我每个预测都有像 temperatureF 这样的属性？

我曾尝试使用 proptypes 但没有成功。
/models/weatherForecast.js

import PropTypes from 'prop-types';
export const WeatherForecast = PropTypes.shape({
    TemperatureC: React.PropTypes.string,
    TemperatureF: React.PropTypes.string,
    Summary: React.PropTypes.string,
    TestProp: React.PropTypes.string
});

然后尝试让智能感知工作
FetchData.js

import * as Model from '../models/weatherForecast';
class FetchData extends Component {
    componentWillMount() {
        this.props.weatherForecast.TestProp // <---- No intellisense or no suggestion was provided for the existence of 'TestProp'. I had to manually write this in.
    }
}
FetchData.prototype = { weatherForecast: Model.WeatherForecast };

知道我可以为此做些什么吗？我知道 Typescript 是一种解决方案，但这是唯一的解决方案吗？

Answer 1

如果您使用 Visual Studio Code，则可以使用 React PropTypes Intellisense扩展名。

然后这将为您使用 PropTypes 的组件提供智能感知建议。