Typescript 和 Material ui 如何修复类型错误答案

【问题标题】：Typescript and material ui how fix type errorTypescript 和 Material ui 如何修复类型错误
【发布时间】：2020-07-10 10:35:07
【问题描述】：

我是 ts 新手，请不要生我的气。我遇到了材料 ui 的问题。无法为[classes[color + 'CardHeader']]: color 设置类型

你能解释一下，我在哪里犯了错误吗？

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;

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

看起来是因为您将字符串文字与变量一起使用：color + 'CardHeader'。

TypeScript 编译器不会知道您是否给它适当的字符串。 IE。如果将'CardHeader' 替换为'foo' 会发生什么？没有一种类型会匹配。

一个潜在的解决方案是重构您的 ColorType 以包含 'CardHeader' 部分，使其看起来像：

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

【讨论】：