如何正确定义TypeScript中reduce返回函数的...args参数类型？

错误原因 #

• reduce初始值被你强制声明为Record<${keyof typeof size}, string>类型，但你实际存入的是调用css生成样式的函数，类型不匹配触发TS2322报错。
• 类型定义错误导致TS认为mediaQueries下的所有属性都是字符串，调用时自然会抛出"不可调用、字符串没有调用签名"的TS2349报错。

修复方案 #

1. 删掉冗余的MediaQueryProps接口，避免覆盖as const带来的精确类型推导。
2. 定义媒体查询函数的匹配类型，替换初始值的错误类型声明。

完整可运行代码 #

import { css } from 'styled-components'
// 声明媒体查询函数的类型，和styled-components的css方法类型对齐
type MediaQueryFunc = (...args: Parameters<typeof css>) => ReturnType<typeof css>

// 直接定义断点配置，as const会自动推导精确的键值类型，不需要额外声明接口
const size = {
  mobile: 'only screen and (max-width: 667px)',
  tablet: 'only screen and (min-width: 668px)',
} as const

const mediaQueryKeys = Object.keys(size) as Array<keyof typeof size>

// 修正初始值的类型声明，属性类型为上面定义的MediaQueryFunc，不再是错误的string
const mediaQueries = mediaQueryKeys.reduce((acc, label) => {
  acc[label] = (...args) => css`
    @media ${size[label]} {
      ${css(...args)};
    }
  `
  return acc
}, {} as Record<keyof typeof size, MediaQueryFunc>)

export default mediaQueries

原有业务侧的调用代码不需要做任何修改，两个报错都会自动消除。后续需要新增断点直接在size对象中添加即可，类型会自动推导，不需要额外调整类型定义。

内容的提问来源于stack exchange，提问作者Gregoire Stevenard