Question

何时

function StyleMixin(base: React.CSSProperties) {}




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

在[someVariable]中，它表示

TS2345：类型'{fontWeight：“ bold”; lineHeight：数字； textAlign：“中心”; ...' 不是可分配给类型为“ CSSProperties”的参数。对象文字可能仅指定已知属性，而“ [someVariable]”不指定类型为“ CSSProperties”。

该如何解决？

Answer 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',
    }
})

当将对象args中的键写为[someKey]时，TS2345错误

1 个答案: