Javascript 如何为情感输入包装函数'；s样式的函数是否正确？

我将

样式化系统

与

情感

一起使用，并且我正在编写一个包装函数，以抽象出我对大多数组件都必须关心的一些细节。包装器函数已经可以工作了，但是我想向它添加TypeScript类型

您可以在Codesandbox上签出文件：

我试着从Emotion的

styled

函数中复制类型，但是我无法完全正确地获取

styledSystemComponent

的返回类型

这是当您在

情绪

的

样式化

函数上“转到定义”时得到的结果

这就是我想到的：

function styledSystemComponent<Tag extends keyof JSX.IntrinsicElements, ExtraProps = {}>(
  tag: Tag,
  styleObject?: StyledOptions
);
function styledSystemComponent<Tag extends React.ComponentType<any>, ExtraProps = {}>(
  tag: Tag,
  styleObject?: StyledOptions
) {
  return styled(tag)(
    {
      ...styleObject,
      shouldForwardProp,
    },
    color,
    space,
    layout,
    flexbox
  );
}

函数样式系统组件(
标签：标签，
styleObject？：StyledOptions
);
函数样式系统组件(
标签：标签，
styleObject？：StyledOptions
) {
返回样式（标记）(
{
…样式对象，
应该支持,，
},
颜色
空间
布局，
柔性箱
);
}

它可以工作，但我仍然缺少返回类型。当我将鼠标悬停在

框上时

会显示类型为

any

我的打字脚本知识还不足以解决这个问题。我觉得我没有理解一些东西，但我无法说出我在这里错过了什么。如果你能帮助我，我将不胜感激

// Box.tsx
import { styledSystemComponent } from '../../utils/styledSystemComponent';

const Box = styledSystemComponent('div', {
  // styles go here
});

function styledSystemComponent<Tag extends keyof JSX.IntrinsicElements, ExtraProps = {}>(
  tag: Tag,
  styleObject?: StyledOptions
);
function styledSystemComponent<Tag extends React.ComponentType<any>, ExtraProps = {}>(
  tag: Tag,
  styleObject?: StyledOptions
) {
  return styled(tag)(
    {
      ...styleObject,
      shouldForwardProp,
    },
    color,
    space,
    layout,
    flexbox
  );
}