在情感中，如何为 css prop 定义一个受约束的 TS 类型，以便只能插入选择的 css 属性？

Posted 2023-03-15

【中文标题】在情感中，如何为 css prop 定义一个受约束的 TS 类型，以便只能插入选择的 css 属性？

【英文标题】：In emotion, how to define a constrained TS type for css prop so only picked css properties can be interpolated?

【发布时间】：2021-12-07 05:05:56

【问题描述】：

情感上，如何为css prop定义一个受约束的TS类型，这样只能对选取的css属性进行插值？

例如要实现如下结果：

// This is considered as valid
css = 
   color: 'white',
   "&:hover": 
      color: 'black',
   

// This is not
css = 
   color: 'white',
   height: 32, // Height should be excluded
   "&:hover": 
      color: 'black',
      border: 2, // Border should be excluded
   

我试过Pick<CSSObject, 'color'>，但这会省略css选择器的键。

我正在寻找的是由 Emotion 公开的任何辅助类型。我想像HelperTypeByEmotion<'color'|'border'>

【参考方案1】：

这很简单。你要定义的是一个只有颜色属性的接口。

！！！记住 ！！！ 打字稿注释不会影响数据本身。您不能神奇地删除不在界面中的数据。打字稿类型是检测错误和类型错位的语法糖。如果您的 css 出于某种原因包含此属性，则在转译为 js 后 - 它们将存在并影响您的应用程序。

interface WithColor 
  color: string


interface MyCss extends WithColor 
  "&:hover": WithColor


css: MyCss = 
  color: 'white',
  "&:hover": 
    color: 'black',
  


// This should be highlighted as not matching the interface.
cssError: MyCss = 
  color: 'white',
  height: 32, // Shows error
  "&:hover": 
    color: 'black',
    border: 2, // Shows error
  

这种方法允许您在其他 css 定义中重用 WithColor 接口并减少应用程序的代码重复。 extends 将为 MyCss 界面提供颜色，而对于 hover 属性，您可以再次重复使用它而无需再次输入。

为了检查您的应用程序中的错误，请使用此命令。

tsc --project tsconfig.json --noEmit

与往常一样，官方文档非常有用。 https://www.typescriptlang.org/docs/handbook/2/objects.html

【讨论】：

嘿，谢谢。是的，我知道我可以做到这一点。我在想是否有任何我可以直接利用的情感暴露的辅助类型。例如：HelperTypeByEmotion<'color'|'border'>...

我不会这样做。我会坚持基本的。这样，当您需要将代码移植到其他地方时，它仍然可以工作。在我的职业生涯中，这种方法已被证明是最稳定、最有弹性的代码编写方式。

我认为这可能是情感定义其 Interpolate 和 CSSObject 类型的方式，所以我希望我可以利用一些辅助类型，而不是重新创建***。但是，是的，我明白你的意思，感谢你的建议。 :)