React FunctionComponent ‘xxx‘ is missing in props validation eslint(react/prop-types)

今天在自己的 React Native 项目里引入了 ESLint 来优化代码风格，通过 npx eslint --init 指令配置好之后 ESLint 要求为组件声明返回类型：

// Missing return type on function
export default function Transcript(props: TranscriptProps) {
	const {style} = props
	return <View style={style}>{...}</View>
}

于是按照要求添上返回值类型的声明：

export default function Transcript(props: TranscriptProps): React.ReactElement {
	const {style} = props
	return <View style={style}>{...}</View>
}

但是这样的类型声明似乎意义不大而且太过繁琐，这时想起了在我认知范围中代码风格最严谨优秀的 ignite，这个项目选择将函数组件改写成了箭头函数的形式，同时利用 React.FunctionElement 简化代码并加强了类型提示功能还能直接在参数里解构 props，随即改写成这样：

const Transcript: React.FC<TranscriptProps> = ({style}) => {
  return (
    <View style={style}>{...}</View>
  )
}

export default Transcript

一切看起来都很美好...但是 ESLint 偏要对这样精致的代码报错 😅

'style' is missing in props validation  eslint(react/prop-types)

翻阅了一下 issues 找到了关于这个问题的讨论，浏览下来大概了解到了问题所在：

• eslint-plugin-react 要求我们使用 PropTypes 来进行运行时类型检查
• 但实际上这里已经使用了 TypeScript 进行静态类型检查
• 我配置了 ESLint 中的解析器为 @typescript-eslint/parser
• 这个解析器在解析传递类型的时候可能存在问题

issue 里有老哥建议使用传统的 function 关键字声明函数组件，但我们如果想要使用箭头函数带来的便利，这样的方法就行不通。有不少讨论者也希望能够保留箭头函数的形式，其中有人提出这样的写法可以避免报错：

const Transcript: React.FC<TranscriptProps> = ({style}: TranscriptProps) => {
  return (
    <View style={style}>{...}</View>
  )
}

export default Transcript

但是我这里实测依然报错 💔，也许换用 babel-eslint-parser 能解决这个问题，不过最后我为了图省事采用了 issue 里提供的一个最简单的方案：

原文地址: 关于 Typescript+ESLint+React 项目中 FunctionComponent 的冲突问题 - 博客 - 编程圈