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)
我将 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 中,则 props 带有下划线:
'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} />
}
我将 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 中,则 props 带有下划线:
'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} />
}