diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f8b6e7ac7..658879ba01 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,8 +7,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange ### Fixed * [`hook-use-state`]: Allow UPPERCASE setState setter prefixes ([#3244][] @duncanbeevers) +* `propTypes`: add `VFC` to react generic type param map ([#3230][] @dlech) [#3244]: https://github.com/yannickcr/eslint-plugin-react/pull/3244 +[#3230]: https://github.com/yannickcr/eslint-plugin-react/issues/3230 ## [7.29.4] - 2022.03.13 diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js index a61a57d67b..61bac2147e 100644 --- a/lib/util/propTypes.js +++ b/lib/util/propTypes.js @@ -105,6 +105,7 @@ module.exports = function propTypesInstructions(context, components, utils) { ForwardRefRenderFunction: 1, forwardRef: 1, VoidFunctionComponent: 0, + VFC: 0, PropsWithChildren: 0, SFC: 0, StatelessComponent: 0, diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js index d44285ab0f..7682204820 100644 --- a/tests/lib/rules/prop-types.js +++ b/tests/lib/rules/prop-types.js @@ -3439,6 +3439,51 @@ ruleTester.run('prop-types', rule, { `, features: ['ts', 'no-babel'], }, + { + code: ` + import React, { VFC } from 'react' + + interface Props { + age: number + } + const Hello: VFC = function Hello(props) { + const { age } = props; + + return
Hello {age}
; + } + `, + features: ['ts', 'no-babel'], + }, + { + code: ` + import React from 'react' + + interface Props { + age: number + } + const Hello: React.VFC = function Hello(props) { + const { age } = props; + + return
Hello {age}
; + } + `, + features: ['ts', 'no-babel'], + }, + { + code: ` + import React from 'react' + + export interface Props { + age: number + } + const Hello: React.VFC = function Hello(props) { + const { age } = props; + + return
Hello {age}
; + } + `, + features: ['ts', 'no-babel'], + }, { code: ` import React, { ForwardRefRenderFunction as X } from 'react' @@ -3974,13 +4019,13 @@ ruleTester.run('prop-types', rule, { interface SomeType { renderValue: (context: ContextType) => React.ReactNode; } - + interface DataObject { id: string, title: string, value: string, } - + const someType: SomeType = { renderValue: ({title}) =>
{title}
, };