Как правильно набрать функцию-обертку для стилизованной функции эмоции? - PullRequest
Новая
       31

Как правильно набрать функцию-обертку для стилизованной функции эмоции?

1 голос
/ 30 сентября 2019

Я использую 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
});

Я попытался скопироватьтипы из styled функции Emotion, но я не могу получить тип возврата styledSystemComponent совершенно верно.

image">

Это то, что выполучить, когда вы 'перейдете к определению' в функции emotion styled.

emotion styled function definition type interface

Вот что я придумал: 

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, он говорит, что типом является any.

Мои знания в области TypeScript недостаточно развиты, чтобы решить эту проблему. Мне кажется, что я чего-то не понимаю, но не могу сказать, чего мне здесь не хватает. Я был бы очень признателен, если бы вы могли мне помочь.

...