Почему даже после указания параметра типа для компонента React линтер по-прежнему жалуется на отсутствие «<property>» при валидации реквизита? - PullRequest
Новая
       49

Почему даже после указания параметра типа для компонента React линтер по-прежнему жалуется на отсутствие «<property>» при валидации реквизита?

1 голос
/ 14 июля 2020

Пожалуйста, обратите внимание на следующий код 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) => (/*...*/); заставляет линтер перестать жаловаться, но я до сих пор не понимаю, почему не используется параметр типа. Может кто-нибудь мне это прояснить? Я ошибаюсь в какой-то концепции, или это просто проблема с линтером?

PS: Я пишу это на VS Code с расширением ESLint.

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

1 Ответ

1 голос
/ 31 июля 2020

Судя по всему, eslint-plugin-react/prop-types не обрабатывается, когда тип опоры объявлен только в аннотации типа переменной.

Единственный тест, который у них есть, который использует этот синтаксис, также явно набирает 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

...