为styled-components中css函数的参数添加TypeScript类型

没问题，我帮你搞定这个类型标注的问题！你遇到的核心是要匹配styled-components中css标签模板函数的参数类型，不用手动硬写，我们可以利用TypeScript的内置工具类型来轻松解决。

解决方案思路 #

css作为标签模板函数时，它的参数结构是：第一个参数是TS内置的TemplateStringsArray（模板字符串的字符串部分数组），后面跟着任意数量的CSSInterpolation类型的插值（这是styled-components提供的类型，涵盖了所有合法的CSS插值值）。

我们可以直接用Parameters<typeof css>来自动获取css函数的完整参数类型，用ReturnType<typeof css>获取它的返回类型，这样就能完美匹配，不用手动拼接类型。

完整代码示例 #

import { css } from 'styled-components';

const sizes = { desktop: 992 };

// 先定义media对象的类型，让TS清晰知道每个属性的函数结构
type MediaQueries = {
  [Key in keyof typeof sizes]: (...args: Parameters<typeof css>) => ReturnType<typeof css>;
};

const media = Object.keys(sizes).reduce((acc, label) => {
  // 把label断言为sizes的键类型，解决Object.keys返回string[]的类型模糊问题
  const sizeKey = label as keyof typeof sizes;
  
  acc[sizeKey] = (...args: Parameters<typeof css>) => css`
    @media(max-width: ${sizes[sizeKey]}px) {
      ${css(...args)}
    }
  `;
  
  return acc;
}, {} as MediaQueries);

简化版本（无需显式定义类型） #

如果你觉得显式定义MediaQueries有点繁琐，也可以直接断言初始值的类型，让TS自动推断：

import { css } from 'styled-components';

const sizes = { desktop: 992 };

const media = Object.keys(sizes).reduce((acc, label) => {
  const sizeKey = label as keyof typeof sizes;
  
  // 直接让每个属性的类型和css函数一致
  acc[sizeKey] = (...args: Parameters<typeof css>) => css`
    @media(max-width: ${sizes[sizeKey]}px) {
      ${css(...args)}
    }
  `;
  
  return acc;
}, {} as { [Key in keyof typeof sizes]: typeof css });

关键细节说明 #

1. Parameters<typeof css>：这个工具类型会自动提取css函数的所有参数类型，完美匹配标签模板的输入要求，不用手动写TemplateStringsArray, ...CSSInterpolation[]。
2. keyof typeof sizes断言：因为Object.keys()返回的是string[]，TS无法推断它恰好是sizes对象的键，所以需要手动断言来消除类型错误。
3. 类型兼容性：这样定义后，media.desktop就和原生css函数的用法完全一致，你可以像使用css一样传入标签模板，TS会自动检查类型是否合法。

内容的提问来源于stack exchange，提问作者Thomas Chia