typescript - 在 styled-components 中输入 css 函数

Question

我正在关注 example在创建媒体模板的文档中，我真的很难输入要传递给 css 函数的参数(示例中的纯 JS 版本):

const sizes = {
  desktop: 992
}

const media = Object.keys(sizes).reduce((acc, label) => {

  acc[label] = (...args) => css`    // <----- how to type args

    @media(max-width: ${sizes[label]}px) {
      ${css(...args)}
    }

  `

  return acc
}, {})

如果你知道 TS 但不知道 styled-components，args 是一个标记的模板文字，所以我会这样使用 media 对象:

media.desktop`
  background-color: blue;
  ${variable}
`

我尝试将 args 键入为 TemplateStringsArray 但 TS 提示因为传播参数需要是 array 类型(我认为它是但不知何故无法识别)。如果我将类型更改为 TemplateStringsArray[]，css() 函数会报错，因为它需要至少 1 个参数，但收到了 0 个或更多。

Answer 1

标记模板的签名应该是 (literals: TemplateStringsArray, ...placeholders: any[]) => string 其中 literals 是模板中的字符串和 placeholders 是变量值。

如果您只想将所有参数传递给 css，您可以使用 call。 Typescript 不会让你直接传播，因为 css 需要 ts 编译器尝试检查的参数:

acc[label] = (...args: any[]) => css`  
  @media(max-width: ${sizes[label]}px) {
    ${css.call(undefined, ...args)}
  }

`

正确指定 media.* 函数类型的完整类型版本将是:

const sizes = {
    desktop: 992
}

const media = Object.keys(sizes).reduce((acc, label) => {

    acc[label] = (literals: TemplateStringsArray, ...placeholders: any[]) => css`      
    @media(max-width: ${sizes[label]}px) {
        ${css(literals, ...placeholders)}
    }

    `;
    return acc
}, {} as Record<keyof typeof sizes, (l: TemplateStringsArray, ...p: any[]) => string>)