无法使用键“keyof React.CSSProperties”为“React.CSSProperties”类型的对象设置值

Question

正如标题所说，以下代码会引发注释中写入的 ts 错误。 如何在不使用

any

之类的解决方法的情况下修复错误？

import {CSSProperties} from 'react';

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


let k: keyof CSSProperties;
for (k in merged){
    //  below line raises:
    //  Type 'string | number | (string & {}) | (number & {}) | undefined' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | undefined'.
    //      Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | undefined'.
    // 
    style[k] = merged[k];
}

ts游乐场：https://www.typescriptlang.org/play/?ssl=10&ssc=1&pln=10&pc=2#code/JYWwDg9gTgLgBAbwMIGUUAUoTAU1sHAZwF84AzLEOAcihwEMBjGagbgCh3GIA7Q+fgE8ANjgBccVBiy58ROAF5E3YdAn UARSICuOasS69+CEHgDMOACYSpmbHhgFCixBqYBrM1m09LSCKpQ6gDuABbAMHREHJyi8O4S7jiCEGSSaHayjkQcZNBwABTucMA8JuZWAJQI7HB1cEKiANruALouplAWli2tHMRAA

Answer 1

问题似乎是

merged[keyof CSSProperties]

可以采用

CSSProperties

中任何键允许的任何值。您想要的是以某种方式缩小您所指的值的范围。实现这一目标的一种方法是使用泛型：

import {CSSProperties} from 'react';

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

const mergeStyle = <T extends keyof CSSProperties>(style: CSSProperties, key: T, value: CSSProperties[T]): void => {
    style[key] = value;
};

let k: keyof typeof merged;
for (k in merged){
    mergeStyle(style, k, merged[k]);
}

这是有效的，因为它告诉 TypeScript

value

参数实际上是

k

的正确类型。