tsdoc-param-tag-with-invalid-name：@param 块后面应该跟一个有效的参数名称（TypeScript ESLint 和 React）

Posted 2023-03-13

【中文标题】tsdoc-param-tag-with-invalid-name：@param 块后面应该跟一个有效的参数名称（TypeScript ESLint 和 React）

【英文标题】：tsdoc-param-tag-with-invalid-name: The @param block should be followed by a valid parameter name (TypeScript ESLint and React)

【发布时间】：2020-12-25 18:17:54

【问题描述】：

我将 JSDoc 和 TSDoc 用于带有 TypeScript 的 React Native 项目。记录道具时有一些奇怪的行为。

所有@param: props.propName 都带有下划线：

tsdoc-param-tag-with-invalid-name: The @param block should be followed by a valid parameter name: The identifier cannot non-word characterseslinttsdoc/syntax

另外，我必须添加两次：道具，因为如果我只将它放在 FC 中，道具会带有下划线：

'onPress' is missing in props validationeslintreact/prop-types

代码：

import React,  useContext, FC  from 'react'
import  GestureResponderEvent, ViewStyle  from 'react-native'
import  useNavigation  from '@react-navigation/native'
import  UserAvatarContext  from '../apps'
import Avatar from './Avatar'

interface Props 
  size?: number
  radius?: number
  style?: ViewStyle
  onPress?: (event: GestureResponderEvent) => void


/**
 * Display the user profile avatar and link
 *
 * @param props - React props
 * @param props.size - the size of the avatar in pixels
 * @param props.radius - the border radius in pixels
 * @param props.onPress - the function to use when pressing the avatar (by default, navigate to the user profile page)
 * @param props.style - Additional style information
 * @returns The avatar icon
 */
const UserAvatar: FC<Props> = ( size = 40, radius, style, onPress : Props) => 
  const navigation = useNavigation()
  const  source  = useContext(UserAvatarContext)
  const defaultOnPress = (): void => navigation.navigate('My profile')

  return <Avatar source=source onPress=onPress || defaultOnPress size=size style=style radius=radius />


export default UserAvatar

我希望它是干净的，但我觉得我需要进行一些配置或修改我的 props 的声明方式。有什么想法吗？

谢谢

【参考方案1】：

只需将属性描述移动到接口定义中，如下所示：

import React,  useContext, FC  from 'react'
import  GestureResponderEvent, ViewStyle  from 'react-native'
import  useNavigation  from '@react-navigation/native'
import  UserAvatarContext  from '../apps'
import Avatar from './Avatar'

interface Props 
  // the size of the avatar in pixels
  size?: number
  // the border radius in pixels
  radius?: number
  // Additional style information
  style?: ViewStyle
  // the function to use when pressing the avatar (by default, navigate to the user profile page)
  onPress?: (event: GestureResponderEvent) => void


/**
 * Display the user profile avatar and link
 *
 * @param props - React props
 */
const UserAvatar: FC<Props> = ( size = 40, radius, style, onPress : Props) => 
  const navigation = useNavigation()
  const  source  = useContext(UserAvatarContext)
  const defaultOnPress = (): void => navigation.navigate('My profile')

  return <Avatar source=source onPress=onPress || defaultOnPress size=size style=style radius=radius />