如何在不使用TypeScript的React项目中通过prop-types实现props自动补全

非TS项目VSCode识别React PropTypes实现props智能提示方案 #

前置配置 #

• 确认VSCode内置扩展「TypeScript and JavaScript Language Features」处于启用状态，默认是开启的，无需额外安装TS。
• 项目根目录新建jsconfig.json文件，添加以下配置开启JS文件类型校验：

{
  "compilerOptions": {
    "checkJs": true,
    "jsx": "react"
  },
  "exclude": ["node_modules"]
}

组件写法规范 #

你现有的PropTypes写法本身是符合要求的，只需要注意以下两点即可触发提示：

1. 确保propTypes拼写正确（小写p开头），且挂载在组件导出的函数上：

import PropTypes from 'prop-types'

function SEO(props) {
  // 此处输入props.meta. 即可触发shape内定义的属性补全
  return <>{/* 组件逻辑 */}</>
}

SEO.propTypes = {
  lang: PropTypes.string,
  meta: PropTypes.shape({
    yoast_wpseo_title: PropTypes.string.isRequired,
    yoast_wpseo_metadesc: PropTypes.string,
  })
}

export default SEO

2. 如果解构props或者提示不灵敏，可以添加JSDoc辅助类型识别，无需额外修改逻辑：

/**
 * @param {Object} props
 * @param {string} [props.lang]
 * @param {Object} props.meta
 * @param {string} props.meta.yoast_wpseo_title
 * @param {string} [props.meta.yoast_wpseo_metadesc]
 */
function SEO({ lang, meta }) {
  // 此处输入meta. 也可触发补全
}

最终实现的补全效果如下：

异常排查 #

如果配置后仍不生效：

• 按下快捷键Ctrl+Shift+P（Mac端为Cmd+Shift+P），执行「TypeScript: Restart TS Server」重启语言服务即可。
• 可安装扩展「React PropTypes IntelliSense」增强PropTypes的识别精度。

内容的提问来源于stack exchange，提问作者PieterT2000