为什么即使在为 React 组件指定了类型参数之后，linter 仍然抱怨 props 验证中缺少“<property>”？

Question

请考虑以下 TypeScript (.tsx) 代码：

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;

通过将 TextInputProps 作为类型参数传递给 React.FC，我可以访问 TextInput 属性，我在 ...props 中对其进行解构。但我还需要 name 和 icon 用于其他目的，所以我创建了一个扩展 TextInputProps 的接口，在那里指定了这些属性，并将 InputProps 传递给 React.FC .

现在我得到 'name' is missing in props validation - eslintreact/prop-types（与 'icon' 相同），但是当我尝试获取 TextInputProps 中指定的任何属性时，这并没有发生。

写 const Input: React.FC<InputProps> = ({ name, icon, ...props }: InputProps) => (/*...*/); 让 linter 停止抱怨，但我仍然不明白为什么使用类型参数没有。有人可以向我澄清这一点吗？我是不是理解错了一些概念，还是只是 linter 的问题？

PS：我正在使用 ESLint 扩展在 VS Code 上写这篇文章。

PS2：这是styles.ts里面的代码，如果有帮助的话：

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 */
`;

Answer 1

从表面上看，eslint-plugin-react/prop-types不处理仅在变量类型注释中声明prop type 的情况。

他们唯一使用这种语法的测试也显式键入了 props arg，这可能就是他们没有处理这种情况的原因。

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

考虑在他们的回购中提出错误 https://github.com/yannickcr/eslint-plugin-react

为什么即使在为 React 组件指定了类型参数之后，linter 仍然抱怨 props 验证中缺少“<property>”？

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

typescript

react-native

type-parameter

typescript-eslint