如何正确地为情感样式函数键入包装函数？

Question

我正在将styled-system与emotion一起使用，并且正在编写包装函数以抽象出我对大多数组件必不可少的一些细节。包装函数已经可以使用，但是我想向其中添加TypeScript类型。

您可以在Codesandbox上检出文件：https://codesandbox.io/s/kind-water-85v0z

// styledSystemComponent.tsx
import React from 'react';
import { styled } from '../styles/theme';
import { color, space, layout, flexbox } from 'styled-system';
import shouldForwardProp from '@styled-system/should-forward-prop';

// TODO: Type this function properly
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
  );
}

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

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

我尝试从Emotion的styled函数复制类型，但是我无法正确获得styledSystemComponent的返回类型。

这是在emotion的{​​{1}}函数上“定义”时得到的。

这是我想出的：

styled

它有效，但是我仍然缺少返回类型。当我将鼠标悬停在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 ); } 上时，其类型为Box。

我的TypeScript知识不足以解决此问题。我觉得我不了解某事，但是我无法说出我在这里想念的东西。如果您能帮助我，我将不胜感激。