升级TypeScript至4.9.5后，styled-components属性覆盖报错如何解决？

在React项目中将TypeScript版本从4.0.5升级到4.9.5后，使用styled-components的如下代码出现类型错误：

export const __offerBlock: IStyles = (props: any) => ({
  gridTemplateColumns: "18% auto",
  ...(props.isMobile
    ? {
        margin: "0 15px",
        gridTemplateColumns: "10% auto"
      }
    : {
        width: "98%"
      })
});

错误提示：

'gridTemplateColumns' is specified more than once, so this usage will be overwritten.ts(2783)
__fileNameStyles.ts(158, 3): This spread always overwrites this property.

这个错误是TypeScript 4.9新增的重复属性覆盖检测特性导致的：

• TS 4.9增强了对对象字面量的静态分析能力，当它能明确判定某段代码会通过扩展运算符（...）覆盖对象已有的属性时，就会抛出ts(2783)错误，提醒开发者注意这个覆盖行为。
• 旧版本（如4.0.5）的TypeScript没有这个检测逻辑，所以不会触发该错误。
• 仅在条件分支场景下报错，是因为TS能静态分析出：当props.isMobile为true时，扩展的对象会明确覆盖外层的gridTemplateColumns属性；而else分支不会产生覆盖。这种明确的分支覆盖行为被新版本TS捕获，从而触发提示。

方案1：调整对象结构（推荐） #

把默认属性值放到条件分支中，避免出现重复属性定义：

export const __offerBlock: IStyles = (props: any) => ({
  ...(props.isMobile
    ? {
        margin: "0 15px",
        gridTemplateColumns: "10% auto"
      }
    : {
        width: "98%",
        gridTemplateColumns: "18% auto"
      })
});

这种写法让每个分支的对象都独立定义所需属性，既保留原有逻辑，又符合TS的类型检查规则。

方案2：使用类型断言跳过检查 #

如果不想调整代码结构，可以用类型断言告诉TS忽略该错误，但会失去部分类型校验能力：

export const __offerBlock: IStyles = (props: any) => ({
  gridTemplateColumns: "18% auto",
  ...(props.isMobile
    ? {
        margin: "0 15px",
        gridTemplateColumns: "10% auto"
      }
    : {
        width: "98%"
      })
} as IStyles);

方案3：禁用重复属性检测规则 #

在tsconfig.json中关闭noDuplicateProperties规则，但这会关闭所有重复属性的检查，可能隐藏其他潜在问题，仅建议在特殊场景下使用：

{
  "compilerOptions": {
    "noDuplicateProperties": false
  }
}

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