tsdoc-param-tag-with-invalid-name：@param块后应带有有效的参数名称TypeScript ESLint和React

如何解决tsdoc-param-tag-with-invalid-name：@param块后应带有有效的参数名称TypeScript ESLint和React

我将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

此外，我还必须添加：Props两次，因为如果我仅将其放在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

我希望它是干净的，但我仍然需要进行一些配置或修改声明道具的方式。有想法吗？

谢谢

解决方法

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

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} />
}