React/React Native透传所有props时如何保留VSCode智能补全提示？

问题本质 #

封装组件时如果不对入参做类型标注，把props定义为无类型的普通对象，VSCode的IntelliSense无法推断该组件可接收的属性范围，自然无法带出TouchableOpacity原生支持的属性提示。

TypeScript 项目方案（推荐） #

直接继承TouchableOpacity的属性类型，既可以完整透传所有原生属性的提示，也支持扩展自定义属性：

import { TouchableOpacity, TouchableOpacityProps } from 'react-native';

// 合并自定义属性和原生组件属性
interface ButtonProps extends TouchableOpacityProps {
  // 此处写组件自定义的属性，比如：
  btnType?: 'primary' | 'danger' | 'default';
}

export default function Button(props: ButtonProps) {
  // 自定义属性单独解构处理，剩余属性透传即可
  const { btnType = 'default', children, ...restProps } = props;
  return <TouchableOpacity {...restProps}>{children}</TouchableOpacity>
}

如果遇到组件没有直接导出Props类型的情况，可以用React内置的工具类型自动提取，对所有组件通用：

import { TouchableOpacity } from 'react-native';
import type { ComponentProps } from 'react';

// 自动提取TouchableOpacity的所有属性类型
type TouchableOpacityProps = ComponentProps<typeof TouchableOpacity>;

interface ButtonProps extends TouchableOpacityProps {
  // 自定义属性
}

配置完成后，使用Button组件时会自动提示所有原生属性、自定义属性，类型校验也会正常生效。

纯JavaScript项目方案 #

没有使用TypeScript的项目，可以通过JSDoc标注类型，VSCode同样可以识别并给出补全提示：

import { TouchableOpacity } from 'react-native';

/**
 * 通用按钮组件
 * @param {import('react-native').TouchableOpacityProps} props
 */
export default function Button(props) {
  return <TouchableOpacity {...props}>{props.children}</TouchableOpacity>
}

如果有自定义属性，在JSDoc中补充定义即可：

import { TouchableOpacity } from 'react-native';

/**
 * 通用按钮组件
 * @param {Object} props
 * @param {import('react-native').TouchableOpacityProps} props.rest - 透传原生TouchableOpacity属性
 * @param {'primary'|'default'} [props.btnType='default'] - 按钮风格类型
 */
export default function Button(props) {
  const { btnType = 'default', children, ...rest } = props;
  return <TouchableOpacity {...rest}>{children}</TouchableOpacity>
}

异常排查 #

如果配置后仍没有出现提示，可以按以下步骤处理：

• 确认项目依赖安装完整，react、react-native类型包存在
• 按快捷键Ctrl+Shift+P（Mac为Cmd+Shift+P），选择「TypeScript: Restart TS Server」重启语言服务
• 确认VSCode没有禁用JavaScript/TypeScript的自动补全功能

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