带有类名的 TypeScript：没有索引签名

Posted 2023-03-13

【中文标题】带有类名的 TypeScript：没有索引签名

【英文标题】：TypeScript with classnames: No index signature

【发布时间】：2019-04-06 06:18:22

【问题描述】：

我正在编写一个 React 应用程序，我正在使用 classnames 来帮助我设计样式。

我像这样加入我的班级名称：

const appBarClasses = classNames(
  [classes.appBar]: true,
  [classes[color]]: color,
  [classes.fixed]: fixed
);

在我设置颜色的行中 TypeScript 抱怨：

[ts] Element implicitly has an 'any' type because type 'Record<"fixed" | "appBar" | "primary" | "transparent", string>' has no index signature.

我用as 或: string 尝试了无数的变化，但无法让它发挥作用。如何告诉 TSLint 这是一个字符串？

编辑： 这是我获得课程的方式。我将 material-ui 用于我的组件，我使用它的 WithStyles 函数。

import withStyles,  WithStyles  from "@material-ui/core/styles/withStyles";
import createStyles from "@material-ui/core/styles/createStyles";

export interface Props extends WithStyles<typeof styles> 
  brand: string;
  fixed: boolean;
  changeColorOnScroll:  height: number; color: string ;
  color: string;

styles 是使用createStyles 创建的对象。

styles 的外观是这样的：

import createStyles from "@material-ui/core/styles/createStyles";
import  primaryColor  from "../../styles";

const navBarStyle = createStyles(
  appBar: 
    alignItems: "center",
    backgroundColor: "#fff",
    border: "0",
    borderRadius: "3px",
    boxShadow:
      "0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15)",
    color: "#555",
    display: "flex",
    flexFlow: "row nowrap",
    justifyContent: "flex-start",
    marginBottom: "20px",
    padding: "0.625rem 0",
    position: "relative",
    transition: "all 150ms ease 0s",
    width: "100%"
  ,
  fixed: 
    position: "fixed"
  ,
  primary: 
    backgroundColor: primaryColor,
    boxShadow:
      "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(156, 39, 176, 0.46)",
    color: "#FFFFFF"
  ,
  transparent: 
    backgroundColor: "transparent !important",
    boxShadow: "none",
    color: "#FFFFFF",
    paddingTop: "25px"
  
);

export default navBarStyle;

【问题讨论】：

您始终可以将classes 或color 转换为any，但可能值得理解为什么编译器认为classes[color] 无效。 classes和color有哪些类型？

你为什么使用[classes[color]]: color？而不是[classes.color]: color？或[classes[color]]: true。 classes 有什么类型？ color 是什么类型的？

@PierreDuc [classes[color]]: color 是类名包中常用的语法（请参阅问题的超链接）。我用它来自动应用正确的样式。我写的组件有一个颜色属性，它会自动使用相应颜色的类。正如 Props 定义中所描述的，颜色是字符串类型，并且类是使用 WithStyles 创建的，我相信这是一个 Record 类型。

如果将颜色投射到keyof Record 会发生什么？

@PierreDuc 像这样：[classes[color as keyof Record<string, string>]]: color, ?同样的错误？？？？

【参考方案1】：

我让它工作了！ ?

在道具界面中，我必须像这样定义color：

color: "transparent" | "primary";

【讨论】：

没错。字符串太不受限制了:)