TypeScript中如何定义返回对象的函数签名以实现组件Props传递？

你的代码里存在几个核心问题，直接导致了TypeScript的类型报错：

1. 父组件传参错误：你给OtherComponent的type属性传的是myStyles('typeB')——这是函数执行后的样式对象，但子组件Props定义里期待的是一个函数本身。
2. 子组件属性名拼写错误：Props里定义的是myStyles，但使用时写成了props.myStyle（少了末尾的s）。
3. 类型签名不规范：myStyles返回的是包含样式属性的对象，不是void，且你后来的类型定义缺少语法规范。

正确实现步骤 #

1. 先定义样式对象的类型

用类型别名明确返回值的结构，让类型检查更清晰：

type StyleObject = {
  borderRadius: string;
  border: string;
  color: string;
};

2. 修正父组件的传参与函数实现

给子组件传递myStyles函数本身，同时补全typeB分支的return语句（之前漏写会导致返回undefined）：

export default function ParentComponent () {
  const myStyles = (type: string): StyleObject => {
    switch (type) {
      case 'typeA':
        return {
          borderRadius: '20px',
          border: '1px solid #000',
          color: 'yellow'
        };
      case 'typeB':
        return {
          borderRadius: '10px',
          border: '1px solid #fff',
          color: 'pink'
        };
      default:
        // 必须处理默认情况，避免返回undefined
        return {
          borderRadius: '0',
          border: 'none',
          color: 'inherit'
        };
    }
  };

  return (
    <>
      <IconButton sx={myStyles('typeA')} />
      <OtherComponent myStyles={myStyles} /> {/* 传递函数本身而非执行结果 */}
    </>
  );
}

3. 修正子组件的Props与使用

import ...

type StyleObject = {
  borderRadius: string;
  border: string;
  color: string;
};

interface Props {
  myStyles: (type: string) => StyleObject; // 匹配函数的实际签名
}

export default function OtherComponent(props: Props) {
  return (
    <IconButton sx={props.myStyles('typeB')} /> {/* 修正拼写错误：myStyles */}
  );
}

进阶优化：限制type参数的有效值 #

为了提升类型安全性，可将type参数限制为固定的联合类型，避免传入无效字符串：

type StyleType = 'typeA' | 'typeB';

// 父组件函数定义
const myStyles = (type: StyleType): StyleObject => {
  switch (type) {
    case 'typeA': ...
    case 'typeB': ...
    // 无需default，联合类型已覆盖所有可能值
  }
};

// 子组件Props定义
interface Props {
  myStyles: (type: StyleType) => StyleObject;
}

这样就能彻底解决TypeScript的类型报错，同时代码的健壮性也会提升。

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