Как сделать автокомпонент vs code Реагировать на типы компонентов?

Как создать автозаполнение VS-кода Реагировать на типы компонентов компонента при использовании компонента в разметке JSX?

P.S.: Я использую JS, а не TS.

Ответ 1

Я заметил, что если у вас есть компонент без гражданства, и вы получаете реквизит с использованием ES6, когда вы используете этот компонент, вы получаете реквизит с автозаполнением.

const Stateless = ({ prop1, prop2 }) => {
  return (
    <div></div>
  )
}

Ответ 2

Существует также возможность использовать определение @params:

/**
 * 
 * @param {{header: string, subheader: string, imageAlt: string, contentList: Array, orderLink: Object, contentLink: Object}} props 
 */
export default function JumbotronMain(props) {...}

Ответ 3

В случае кода VS и React Class Component, вы можете сделать что-то вроде:

//Display.js

/* @flow */

import React from "react";
import PropTypes from "prop-types";

import "./Display.css";


type Props = {
  /**
   * "value" to display
   */
  value?: String | Number
}

export default class Display extends React.Component<Props> {
  static propTypes = {
    value: PropTypes.string
  };

  render() {
    return (
      <div className="component-display">
        <div>{this.props.value}</div>
      </div>
    );
  }
}

А в родительском компоненте, где бы вы ни использовали компонент <Display/>, вывод будет выглядеть так: