Question

我正在关注创建媒体模板的文档中的example，我真的很难输入传递给css函数的参数（来自示例的纯JS版本）：< / p>

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而不是样式组件，args是标记的模板文字，所以我会使用media对象：

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

我尝试输入args作为TemplateStringsArray，但是TS抱怨因为传播参数需要是array类型（我认为它是，但不知何故它不被识别）。如果我将类型更改为TemplateStringsArray[]，则css()函数会抱怨，因为它至少需要1个参数，但收到0或更多。

Answer 1

标记模板的签名应为--reports-dir target/test-result，其中(literals: TemplateStringsArray, ...placeholders: any[]) => string是模板中的字符串，literals是变量值。

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

css

正确指定acc[label] = (...args: any[]) => css` @media(max-width: ${sizes[label]}px) { ${css.call(undefined, ...args)} } `函数类型的完全类型版本为：

media.*

Answer 2

foo solution很不错，但不适用于我。它产生一个带逗号的字符串。因此，我将Titian Cernicova-Dragomir添加到join函数中。

css

在样式组件中键入css函数

2 个答案: