[SOLVED] Why, even after specifying a type parameter for a React component, the linter still complains about '<property>' missing in props validation?

Why, even after specifying a type parameter for a React component, the linter still complains about '<property>' missing in props validation?

Please consider the following TypeScript (.tsx) code:

import React from 'react';
import { TextInputProps } from 'react-native';
import { Container, TextInput, Icon } from './styles';

interface InputProps extends TextInputProps {
  name: string;
  icon: string;
}

const Input: React.FC<InputProps> = ({ name, icon, ...props }) => (
  <Container>
    <Icon name={icon} size={20} color="#666360" />

    <TextInput
      keyboardAppearance="dark"
      placeholderTextColor="#666360"
      {...props}
    />
  </Container>
);

export default Input;

By passing TextInputProps as a type parameter to React.FC I have access to the TextInput properties, which I'm destructuring in ...props. But I also need name and icon for other purposes, so I created an interface extending TextInputProps, specified these properties there, and passed InputProps to React.FC instead.

Now I get 'name' is missing in props validation - eslintreact/prop-types (same for 'icon'), but this didn't happen when I tried to get any of the properties specified inside TextInputProps.

Writing const Input: React.FC<InputProps> = ({ name, icon, ...props }: InputProps) => (/*...*/); makes the linter stop complaining, but I still don't get why using the type parameter doesn't. Can someone clarify this to me? Am I getting some concept wrong, or is it just a problem with the linter?

PS: I'm writing this on VS Code with ESLint extension.

PS2: This is the code inside styles.ts, if it may help:

import styled from 'styled-components/native';
import FeatherIcon from 'react-native-vector-icons/Feather';

export const Container = styled.View`
  /* Some CSS */
`;

export const TextInput = styled.TextInput`
  /* More CSS */
`;

export const Icon = styled(FeatherIcon)`
  /* ... and CSS */
`;

Solution

From the looks of it, eslint-plugin-react/prop-types does not handle when the prop type is declared in the variable type annotation only.

The only test that they have that uses this syntax also explicitly types the props arg, which is probably why they haven't handled this case.

https://github.com/yannickcr/eslint-plugin-react/blob/72275716be7fb468fc9a2115603d9c1b656aa0da/tests/lib/rules/prop-types.js#L2578-L2599

Consider raising a bug in their repo https://github.com/yannickcr/eslint-plugin-react