Расширение интерфейса HTMLProps вызывает ошибку неправильного расширения интерфейса

Я пытаюсь расширить интерфейс для импорта из реакции, но получаю сообщение об ошибке: TS2430: Interface 'IProps' incorrectly extends interface 'HTMLProps<HTMLTableCellElement>'..

Это мой полный код и сообщение об ошибке:


import cx from 'classnames';
import { HTMLProps } from 'react';

import styles from './index.module.scss';

export interface IProps extends HTMLProps<HTMLTableCellElement> {
  title?: string;
  className?: string;
  wrap?: boolean;
}

export const Th = ({ title, className, wrap, ...rest }: IProps) => {
  return (
    <th
      data-title = {title}
      {...rest}
      className = {cx(wrap && styles.wrap, className)}
    />
  );
};

И сообщение об ошибке:

ERROR in.../Th.tsx:6:18
TS2430: Interface 'IProps' incorrectly extends interface 'HTMLProps<HTMLTableCellElement>'.
  Types of property 'wrap' are incompatible.
    Type 'boolean | undefined' is not assignable to type 'string | undefined'.
      Type 'boolean' is not assignable to type 'string'.
    4 | import styles from './index.module.scss';
    5 |
  > 6 | export interface IProps extends HTMLProps<HTMLTableCellElement> {
      |                  ^^^^^^
    7 |   title?: string;
    8 |   className?: string;
    9 |   wrap?: boolean;

Что я пытаюсь сделать: я пытаюсь импортировать все типы из HTMLProps<HTMLTableCellElement>, но добавляю новые, такие как wrap, ...etc. Я думаю, что ошибка связана с тем, что className уже определен как string внутри HTMLProps<HTMLTableCellElement>, и я не могу переопределить это?

Чего я ожидаю: я ожидал, что смогу расширять типы из импортированных интерфейсов. Я не хочу переопределять импортированные типы.

wrap уже существует в элементе textarea. Поэтому не следует перезаписывать его. Назовите свой реквизит как-нибудь иначе, например shouldWrap или wrapped.

— 11.04.2023 17:07

Это решило проблему, спасибо @pink. Если вы опубликуете это как ответ, я отмечу его как одобренный.

— 11.04.2023 17:12

reactjs typescript interface

11.04.2023 17:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь ошибка, потому что кажется, что HTMLProps включает атрибут обтекания текстовых областей. Я не совсем уверен, что это именно из текстовых полей (похоже, что wrap поддерживается для большинства текстовых элементов). Поскольку это boolean для элементов textarea, повторный ввод его в string недействителен. Простым обходным решением было бы просто переименовать свойство:

export interface IProps extends HTMLProps<HTMLTableCellElement> {
    title?: string;
    className?: string;
    shouldWrapText?: boolean; // okay
}

export const Th = ({ title, className, shouldWrapText, ...rest }: IProps) => {
    return (
        <th
            data-title = {title}
            {...rest}
            className = {cx(shouldWrapText && styles.wrap, className)}
        />
    );
};

Детская площадка

11.04.2023 17:22