时间戳

首页 > 解决方案 > Typescript 将 React CSS 键类型添加到对象键

reactjs - Typescript 将 React CSS 键类型添加到对象键

问题描述

我稍微修改了一个名为 ReactCSS 的库。我稍微更改了函数的类型定义，直到最近我才意识到 CSS 属性position会抛出错误，因为键类型是string并且它想要Position | undefined。

Types of property 'position' are incompatible.
    Type 'string' is not assignable to type 'Position | undefined'.

我认为我必须做的是遍历样式的所有键并将它们的类型更改为 CSS 属性中的相应类型。例如，它将转换：

"position": string,

至：

"position": Position | undefined,

理论上它可能是这样的：

type CSSClasses<T extends { [key: string]: string }> = {
    [K in keyof T]: React.CSSProperties[K] || T[K]
}

因此它将类型设置为 CSS 类型，否则它将保持其原始类型。

这确实有效：

type CSSClasses<T extends { [key: string]: string }> = {
    [K in keyof T]: React.CSSProperties
}

但是，它使用户可以访问所有 CSS 属性，其中大多数是未定义的，因为它们尚未由用户在对象中定义。

T可能是这样的对象：

{
  div: {
     color: "red",
     position: "absolute",
  },
  span: {
     color: "blue",
     position: "relative",
  }
}

所以我必须遍历对象，该对象的键，然后正确设置它们的类型。

但是它允许用户访问所有 CSS 属性

关于上述对象，这意味着：

object.div.color // "red"
object.div.background // "undefined" -- shouldn't be a property because the user hasn't defined it

object.div // has all CSS properties

我该怎么做呢？

标签： reactjstypescripttypescript-generics

解决方案

推荐阅读