Почему ESLint жалуется на проверку реквизитов в моем проекте React и Typescript

#reactjs #typescript #eslint-config-airbnb

#reactjs #typescript #eslint-config-airbnb

Вопрос:

Я использую Typescript для определения и ввода своих реквизитов. Я использую ESLint и eslint-config-airbnb-typescript.

Я использую gatsby-plugin-graphql-codegen для генерации типов для моих запросов GraphQL.

ESLint жалуется на проверку реквизитов.

Это соответствующий файл React / Gatsby index.tsx :

 import React from 'react';
import { PageProps, Link, graphql } from 'gatsby';

import Layout from 'components/layout';
import Image from 'components/image';
import SEO from 'components/seo';

import { ProductsQuery } from '../../graphql-types';

    const IndexPage: React.FC<PageProps<ProductsQuery>> = ({ data: { products } }) => (
      <Layout>
        <SEO title="Home" />
        <h1>Hi people</h1>
        <p>Welcome to your new Gatsby site.</p>
        <p>Now go build something great.</p>
        <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
          <Image />
        </div>
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
        <ul>
          {products.nodes.map((product) => (
            <li key={product.id}>
              <h3>{product.name}</h3>
            </li>
          ))}
        </ul>
      </Layout>
    );
    
    export const pageQuery = graphql`
      query Products {
        products: allGraphCmsProduct {
          nodes {
            id
            name
          }
        }
      }
    `;
    
    export default IndexPage;
 

Если я добавлю 'react/prop-types': 'off' к правилам ESLint, все в порядке. Это правильный метод? Поскольку я определяю свои типы с помощью Typescript, мне не нужны типы React prop, но почему я получаю эту ошибку, я думал eslint-config-airbnb-typescript , что справлюсь с этим?

Комментарии:

1. Можете ли вы добавить код, который генерирует ошибку ESLint? Возможно, что ваши реквизиты неправильно набираются с помощью TypeScript.

2. Если вы используете TypeScript, вы можете отключить react/prop-types его, если вам не нужна проверка типа prop во время выполнения, которую он вам предоставляет.