React TypeScript报错：类型'string | number'不存在属性'button_basic'

你为classes参数定义的类型和实际传入的值类型不匹配：

• 你在ConnectedBrokerFormProps中把classes定义为了string | number类型，但父组件传入的classes是makeStyles执行后返回的对象类型，该对象的键是你声明的样式名（比如button_basic），值是生成的CSS类名字符串。
• 你尝试访问props.classes.button_basic时，TypeScript会检查string | number类型上是否存在button_basic属性，显然不存在，所以抛出2339错误。其余props未报错是因为它们的定义类型和实际传入值类型匹配。

只需要把classes的类型修改为和实际传入值匹配的对象类型即可，常用两种实现方式： #

方式1：直接复用useStyles的返回类型（推荐，无需重复定义） #

如果父子组件在同一作用域，或者子组件可以引入父组件的useStyles定义，直接用ReturnType推导类型即可：

interface ConnectedBrokerFormProps {
  onSubmit: string;
  key: string;
  readOnly: boolean;
  mode: string;
  // 直接推导useStyles返回的classes对象类型
  classes: ReturnType<typeof useStyles>;
}

方式2：单独声明classes的结构类型 #

如果子组件是独立抽离的，无法访问父组件的useStyles定义，可以单独声明classes的结构：

// 单独定义classes的结构，后续新增样式名同步在这里补充即可
interface BrokerFormClasses {
  button_basic: string;
}

interface ConnectedBrokerFormProps {
  onSubmit: string;
  key: string;
  readOnly: boolean;
  mode: string;
  classes: BrokerFormClasses;
}

修改完成后报错就会消失，后续如果新增样式类名，同步更新classes的类型定义即可。

内容的提问来源于stack exchange，提问作者user10727653