TypeScript编译错误：Object literal may only specify known properties 排查与解决

从Codesandbox下载示例代码后，创建了仅包含{"extends": "react-app"}的.eslintrc文件，现在Card.tsx出现TypeScript编译错误：Object literal may only specify known properties。相关代码如下：

interface CardProps {
  width?: number;
  height?: number;
}

export default function Card({ width = 660, height = 300 }: CardProps) {
  return (
    <div
      style={{
        display: "flex",
        height,
        width,
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
        backgroundImage: "linear-gradient(to bottom, #dbf4ff, #fff1f1)",
        fontSize: width / 12,
        letterSpacing: -width / 220,
        fontWeight: 700,
        whiteSpace: "nowrap"
      }}
    >
      <div
        style={{
          display: "flex",
          padding: "5px 40px",
          width: "auto",
          textAlign: "center",
          backgroundImage:
            "linear-gradient(90deg, rgb(0, 124, 240), rgb(0, 223, 216))",
          backgroundClip: "text",
          "-webkit-background-clip": "text",
          color: "transparent"
        }}
      >
        Build images
      </div>
      <div
        style={{
          padding: "5px 40px",
          width: "auto",
          textAlign: "center",
          backgroundImage:
            "linear-gradient(90deg, rgb(121, 40, 202), rgb(255, 0, 128))",
          backgroundClip: "text",
          "-webkit-background-clip": "text",
          color: "transparent"
        }}
      >
        with React
      </div>
      <div
        style={{
          padding: "5px 40px",
          width: "auto",
          textAlign: "center",
          backgroundImage:
            "linear-gradient(90deg, rgb(255, 77, 77), rgb(249, 203, 40))",
          backgroundClip: "text",
          "-webkit-background-clip": "text",
          color: "transparent"
        }}
      >
        from your Browser
      </div>
    </div>
  );
}

错误原因 #

React的style属性对应的TypeScript类型CSSProperties仅收录标准CSS属性，-webkit-background-clip这类浏览器前缀属性不在内置类型声明范围内，TypeScript会判定其为未知属性，因此抛出该错误。

修复方法 #

方法一：类型断言跳过校验 #

给带前缀的属性添加as any断言，让TypeScript跳过类型检查：

style={{
  // 其他属性...
  backgroundClip: "text",
  "-webkit-background-clip": "text" as any,
  color: "transparent"
}}

方法二：扩展CSSProperties类型 #

在项目中创建类型声明文件（如src/types/css.d.ts），扩展内置类型以支持该前缀属性：

import "react";

declare module "react" {
  interface CSSProperties {
    "-webkit-background-clip"?: string;
  }
}

方法三：移除前缀（推荐） #

现代主流浏览器已全面支持标准的background-clip: text，直接删除-webkit-background-clip属性，仅保留backgroundClip: "text"即可，既符合类型规范，也能保证兼容性。

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