PropTypes 不是必需的，但在 VSCode 中按要求显示答案

【问题标题】：PropTypes not required, but showing as required in VSCodePropTypes 不是必需的，但在 VSCode 中按要求显示
【发布时间】：2021-07-16 01:20:03
【问题描述】：

我最近刚刚在我的 javascript react 项目中添加了一个 jsconfig.json 文件，以获得更好的导入、别名等。现在一切正常，我什至得到了一些增强的类型安全性。我的问题是 VSCode 似乎正在查看函数参数而不是 PropTypes 来检查是否需要道具。在javascript中将参数标记为可选的正确方法是什么？我不能像在 Typescript 中那样只在末尾标记一个问号。代码编译并运行良好，我们只是 VSCode 抱怨。我已经运行了没有任何扩展的 VSCode，所以我知道它不是扩展。

错误是

Property 'className' is missing in type '{ active: true; png: true; }' but required in type '{ [x: string]: any; active: any; className: any; png: any; width?: number; }'.

这是我的文件，我已经简化了代码

// jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "checkJs": true,
    "jsx": "react",
    "module": "commonjs",
    "target": "es6",
    "paths": {
      "@/*": ["./*"],
      "@components/*": ["./common/components/*"]
    }
  },
  "include": ["src/**/*"]
}

// BuildYourTeam.jsx

import React from 'react'

import CreditCard from '@components/CreditCard'

const BuildYourTeam = ({ className }) => {

  return (
    <div>
          <CreditCard active png />
    </div>
  )
}

export default BuildYourTeam

// CreditCard.jsx

import React from 'react'
import classNames from 'classnames'
import PropTypes from 'prop-types'

import creditCard from '@images/credit_card.png'
import styling from './creditCard.module.scss'

/**
 * Simple component for displaying credit card images
 */
const CreditCard = ({ active, className, png, width = 100, ...props }) => {
  const classes = classNames(className, 'inline-block', 'relative')
  let image

  // At smaller sizes the png looks better for active
  if (png && active) {
    image = (
      <img className={styling.active} src={creditCard} width={width} alt='Credit Card' {...props} />
    )
  } 

  return (
    <div className={classes}>
      {image}
      <div className={styling.background} />
    </div>
  )
}

CreditCard.propTypes = {
  active: PropTypes.bool,
  className: PropTypes.string,
  png: PropTypes.bool,
  width: PropTypes.number,
}

export default CreditCard

【问题讨论】：

要么声明一个接口并在末尾用? 标记可选属性，要么用defaultPropTypes 做它并将其设置为nulll
没有办法让 VScode 从 PropTypes 中读取它吗？接口也可以在 javsacript 中工作吗？没试过
我不相信还有其他方法。检查我的答案，看看是否有效
@TomelSafadi 我出错了：'interface' declarations can only be used in TypeScript files.
VSCode 正在对您的 JS 代码执行 Typescript 智能感知（默认情况下会执行此操作）。只需忽略它或将其关闭即可。或者更好的是听它，并以更可静态分析的方式编写代码。

标签： javascript reactjs visual-studio-code

【解决方案1】：

import type { FC } from 'react';

...

interface CreditCardProps {
    active: boolean;
    className?: string;
    png: boolean;
    width: number
}

const CreditCard: FC<CreditCardProps> = ({ active, className, png, width = 100, ...props }) => {
    ...
};

使用 defaultProps：

CreditCard.defaultProps = {
  className: null, // or ''
}

【讨论】：

【解决方案2】：

按照建议，我在 prop 参数中设置了默认值。我还在 JSDoc 中添加了似乎有帮助的类型

// CreditCard.jsx
/*
 * @param {Object} props
 * @param {boolean} [props.active = false]
 * @param {string} [props.className = '']
 * @param {boolean} [props.png = false]
 * @param {number} [props.width = 100]
 */
const CreditCard = ({ active = false, className = '', png = false, width = 100, ...props })

【讨论】：