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

【问题标题】：Styled components + Typescript: How do I type the css helper function?样式化组件 + Typescript：如何键入 css 辅助函数？
【发布时间】：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？

【问题讨论】：

标签： typescript styled-components

【解决方案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;
  }
};

【讨论】：