样式化组件 + Typescript：如何键入 css 辅助函数？

Posted 2023-03-15

【中文标题】样式化组件 + Typescript：如何键入 css 辅助函数？

【英文标题】：Styled components + Typescript: How do I type the css helper function?

【发布时间】：2022-01-10 05:39:51

【问题描述】：

我有一个组件，它有一堆独特的样式，具体取决于变体道具：

interface CommonStyleProps 
  filled_icon: boolean;

const primaryStyles = css<CommonStyleProps>`...`
const ghostStyles = css<CommonStyleProps>`...`

const calculateColors = (
  variant: BUTTON_VARIANTS
) => 
  switch (variant) 
    case BUTTON_VARIANTS.GHOST:
      return ghostStyles;
    case BUTTON_VARIANTS.PRIMARY:
    default:
      return primaryStyles;
  
;

interface ContainerProps 
  variant: BUTTON_VARIANTS;


const Container = styled.button<ContainerProps>`
  $( variant ) => calculateColors(variant).  // <---------- Typescript complains here
`;

但是，Typescript 抱怨 calculateColors 的返回类型错误。

当我将返回类型更新为此时，它可以工作：

import styled, 
  css,
  keyframes,
  FlattenInterpolation,
  ThemedStyledProps,
 from 'styled-components';

...

const calculateColors = (
  variant: BUTTON_VARIANTS
): FlattenInterpolation<ThemedStyledProps<any, any>> => 
  ...
;

有没有更好的方法来定义css 的返回类型而不使用any？

【参考方案1】：

想通了

必须删除 CommonStylesProps 并使用 ContainerProps + DefaultTheme

const calculateColors = (
  variant: BUTTON_VARIANTS
): FlattenInterpolation<ThemedStyledProps<ContainerProps, DefaultTheme>> => 
  switch (variant) 
    case BUTTON_VARIANTS.SECONDARY:
      return secondaryStyles;
    case BUTTON_VARIANTS.INTERACTIVE:
      return interactiveStyles;
    case BUTTON_VARIANTS.GHOST:
      return ghostStyles;
    case BUTTON_VARIANTS.PRIMARY:
    default:
      return primaryStyles;
  
;