如何在不使用any这类变通方案的前提下修复React.CSSProperties属性赋值的TypeScript错误

遇到这种TypeScript类型不兼容的问题其实挺常见的，咱们先来看看你遇到的具体场景：你想把两个CSSProperties对象的属性合并，但用for...in遍历赋值时，TypeScript没办法准确推断每个属性对应的值类型，所以抛出了类型不匹配的错误。不用any的话，咱们有几种靠谱的解决办法：

方法一：用泛型+类型断言精准匹配类型（适合修改原对象的场景） #

如果你的需求是直接修改原style对象，而不是生成新对象，可以写一个泛型函数来处理属性赋值，确保键和值的类型严格对应：

import { CSSProperties } from 'react';

const style: CSSProperties = { color: 'blue' };
const merged: CSSProperties = { backgroundColor: 'white' };

// 泛型函数约束键的类型为CSSProperties的合法键
function assignStyle<K extends keyof CSSProperties>(target: CSSProperties, source: CSSProperties, key: K) {
  target[key] = source[key] as CSSProperties[K];
}

for (const k in merged) {
  // 先确认是对象自身属性，避免遍历到原型链上的内容
  if (merged.hasOwnProperty(k)) {
    assignStyle(style, merged, k as keyof CSSProperties);
  }
}

这里通过泛型K把键约束为CSSProperties的合法属性，再用类型断言告诉TypeScript：source[key]的类型就是目标属性对应的类型，这样就能绕过错误，同时保持类型安全。

方法二：用Object.assign或扩展运算符（最简洁的合并方案） #

如果你的需求是得到一个合并后的新样式对象，而不是修改原对象，那Object.assign或者ES6扩展运算符是最优解——TypeScript对这两种操作的类型推断支持非常好，完全不需要额外处理：

import { CSSProperties } from 'react';

const style: CSSProperties = { color: 'blue' };
const merged: CSSProperties = { backgroundColor: 'white' };

// 方法1：Object.assign合并
const combinedStyle = Object.assign({}, style, merged);

// 方法2：扩展运算符合并
const combinedStyle2 = { ...style, ...merged };

这种写法不仅代码简洁，还能保证类型完全符合CSSProperties的约束，是最推荐的方式。

方法三：自定义类型守卫缩小类型范围 #

你也可以写一个类型守卫函数，帮TypeScript确认遍历到的键是CSSProperties的合法属性，这样就能正确推断值的类型：

import { CSSProperties } from 'react';

const style: CSSProperties = { color: 'blue' };
const merged: CSSProperties = { backgroundColor: 'white' };

// 自定义类型守卫，判断键是否为CSSProperties的合法属性
function isCSSPropertyKey(key: string): key is keyof CSSProperties {
  // 这里可以用更严谨的判断，比如提前枚举所有CSS属性键，不过简单判断key在style里也够用
  return key in style;
}

for (const k in merged) {
  if (isCSSPropertyKey(k)) {
    // 此时TypeScript已经知道k是合法的CSS属性键，赋值不会报错
    style[k] = merged[k];
  }
}

总的来说，如果只是合并样式，优先选方法二；如果必须修改原对象，方法一或方法三都是不错的选择，都不用any这种规避类型检查的变通方案。

备注：内容来源于stack exchange，提问作者Ryo