对象 args 中的键写为 [someKey] 时出现 TS2345 错误

Posted 2023-02-21

【中文标题】对象 args 中的键写为 [someKey] 时出现 TS2345 错误

【英文标题】：TS2345 error when a key in object args is written like [someKey]

【发布时间】：2019-01-23 08:18:59

【问题描述】：

什么时候

function StyleMixin(base: React.CSSProperties) 




StyleMixin(
    fontWeight: 'bold',
    lineHeight: 1,
    textAlign: 'center',
    [someVariable]: 
        fontSize: '1rem',
    

在[someVariable]，它说

TS2345：类型参数 ' fontWeight: "bold";线高：数字； 文本对齐：“中心”； ...' 不是 可分配给“CSSProperties”类型的参数。对象字面量可能 仅指定已知属性，而 '[someVariable]' 不指定 存在于“CSSProperties”类型中。

如何解决这个问题？

【参考方案1】：

如果someVariable 是不是React.CSSProperties 属性的字符串文字类型，则会发生这种情况

const someVariable = "nonExistentProperty";
StyleMixin(
    fontWeight: 'bold',
    lineHeight: 1,
    textAlign: 'center',
    [someVariable]: 
        fontSize: '1rem',
    
)

如果someVariable 是变量而不是常量（即用let 或var 声明），它实际上会起作用。

我建议确保您确实要添加不在 CSSProperties 中的属性（如果您没有看到完整的错误消息，请在 tsconfig.json 中使用 "noErrorTruncation": true）

如果你真的希望StyleMixin 是一个可以向CSSProperties 添加额外属性的对象，你可以在函数中使用泛型参数：

function StyleMixin< T extends React.CSSProperties>(base: T) 
const someVariable = "nonExistentProperty";
StyleMixin(
    fontWeight: 'bold',
    lineHeight: 1,
    textAlign: 'center',
    [someVariable]: 
        fontSize: '1rem',
    
)