如何在不禁用TypeScript的前提下修复TS2590类型报错

Expression produces a union type that is too complex to represent. ts(2590)

核心判断结论 #

你关于「对象复杂度过高导致TypeScript无法完成类型评估」的猜测完全准确。

根本原因 #

• React.CSSProperties 是包含数百个CSS属性的超大型类型，每个属性的值类型又嵌套了字符串字面量联合、数字、特殊配置对象等多层结构，整体类型体量极大。
• 当你通过动态索引（即result[key] = prop[key]这种写法）做赋值时，TS会尝试全量计算两侧类型的所有可能匹配组合：当你的Test接口属性只有1-2个时，生成的联合类型规模还在TS的默认计算阈值内；属性数量达到3个及以上时，交叉展开后的联合成员数量会直接超出TS的类型递归深度、复杂度上限，从而抛出TS2590错误。
• 该报错仅发生在静态类型检查阶段，属于类型计算溢出，不会影响运行时逻辑，这也是你的代码可以正常运行、样式正确渲染的原因。

有效修复方案（无需禁用TS检查） #

以下方案均不会绕过类型校验，只是避开TS处理动态索引赋值时的全量联合展开逻辑，不会损失类型安全性：

• 使用对象展开语法（最简洁）
  TS对对象展开的类型合并做过专门的性能优化，不会触发深度联合计算，可以直接替换循环逻辑：

  import React from 'react';
  
  interface Test {
      color?: string;
      backgroundColor?: string;
      border?: string;
  }
  
  export const func = (prop: Test): React.CSSProperties => {
      return { ...prop };
  };
  

• 收窄赋值时的值类型，避免全量类型计算
  如果需要保留循环逻辑，可以给赋值的值加精准的类型断言，告诉TS不需要做全量交叉匹配：

  import React from 'react';
  
  interface Test {
      color?: string;
      backgroundColor?: string;
      border?: string;
  }
  
  export const func = (prop: Test): React.CSSProperties => {
      const result: React.CSSProperties = {};
  
      for (const some in prop) {
          const key = some as keyof Test;
          // 明确值的类型为对应CSS属性的合法值，跳过全量联合展开
          result[key] = prop[key] as React.CSSProperties[typeof key];
      }
  
      return result;
  };
  

• 从根源对齐类型定义
  如果你的Test接口本身就是CSS属性的子集，可以直接用TS内置工具类型从React.CSSProperties派生类型，保证结构完全对齐，消除额外的类型匹配开销：

  import React from 'react';
  
  // 直接从React.CSSProperties挑选需要的属性，类型完全对齐
  type Test = Pick<React.CSSProperties, 'color' | 'backgroundColor' | 'border'>;
  
  export const func = (prop: Test): React.CSSProperties => {
      return Object.assign({}, prop);
  };
  

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