Машинопись и интерфейс материалов как исправить ошибку типа

Question

Я новичок в TS, пожалуйста, не злись на меня. У меня проблема с материальным интерфейсом. Не могу установить тип для [classes[color + 'CardHeader']]: color

Выдает ошибку Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Record<"cardHeader" | "cardHeaderPlain" | "warningCardHeader" | "successCardHeader" | "dangerCardHeader" | "infoCardHeader" | "primaryCardHeader", string>'.

Не могли бы вы объяснить мне, где я делаю ошибку?

import React, { ReactNode } from 'react';
import classNames from 'classnames';
import useStyles from './styles/cardHeaderStyle';

type CardHeaderProps = {
  className: string,
  children: ReactNode,
  color: ColorType,
  plain?: boolean,
};

type ColorType = 'warning' | 'success' | 'danger' | 'info' | 'primary';

const CardHeader = (props: CardHeaderProps): JSX.Element => {
  const classes = useStyles();
  const { className = '', children, color, plain, ...rest } = props;
  console.log('classes', classes);

  const cardHeaderClasses = classNames({
    [classes.cardHeader]: true,
    // [classes['primaryCardHeader']]: color,
    [classes[color + 'CardHeader']]: color, 
    [classes.cardHeaderPlain]: plain,
    [className]: className !== undefined,
  });

  return (
    <div className={cardHeaderClasses} {...rest}>
      {children}
    </div>
  );
};

export default CardHeader;

введите описание изображения здесь

Answer 1

Похоже, это потому, что вы используете литерал sting в сочетании с переменной: color + 'CardHeader'.

Компилятор TypeScript не узнает, что вы даете / не даете ему соответствующую строку. Т.е. что будет, если вы замените 'CardHeader' на 'foo'? Ни один из типов никогда не совпадет.

Потенциальным решением может быть рефакторинг вашего ColorType, чтобы включить часть 'CardHeader', чтобы он выглядел так:

type ColorType = 'warningCardHeader' | 'successCardHeader' | 'dangerCardHeader' | 'infoCardHeader' | 'primaryCardHeader';

Теперь это будет соответствовать типу Record<"cardHeader" | "cardHeaderPlain" | "warningCardHeader" | "successCardHeader" | "dangerCardHeader" | "infoCardHeader" | "primaryCardHeader", string>.