TypeScript 2.4.1 -> fontWeight -> 类型 'number' 不可分配给类型 '"inherit" | 400 |

Posted 2023-02-22

【中文标题】TypeScript 2.4.1 -> fontWeight -> 类型 \'number\' 不可分配给类型 \'"inherit" | 400 |

【英文标题】：TypeScript 2.4.1 -> fontWeight -> Type 'number' is not assignable to type '"inherit" | 400 |TypeScript 2.4.1 -> fontWeight -> 类型 'number' 不可分配给类型 '"inherit" | 400 |

【发布时间】：2018-03-17 03:40:31

【问题描述】：

当我尝试在 TypeScript 中设置 fontWeight 时出现此错误：

Types of property 'test' are incompatible.
    Type ' fontWeight: number; ' is not assignable to type 'Partial<CSSProperties>'.
        Types of property 'fontWeight' are incompatible.
            Type 'number' is not assignable to type '"inherit" | 400 | "initial" | "unset" | "normal" | "bold" | "bolder" | "lighter" | 100 | 200 | 30...'.

即使400 是一个正确的数字，它也可以是任何数字，因此我得到了我理解的错误。我可以将此错误跟踪到 React.CSSProperties，它指定 fontWeight 应如下所示：

fontWeight?: CSSWideKeyword | "normal" | "bold" | "bolder" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

我不能设置test: React.CSSProperties

const styles = (theme: Theme) => (
    test: 
        fontWeight: 400
    
);

我可以这样做，但这不是 Material UI 处理类的方式。

const test: React.CSSProperties = 
    fontWeight: 400

完整代码：

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactRouter from "react-router";
import  withRouter  from "react-router-dom";
import  withStyles  from 'material-ui/styles';
import Badge from 'material-ui/Badge';
import Grid from 'material-ui/Grid';
import  Theme  from 'material-ui/styles';

interface IState 
    userName: string;


interface IProps 
    history?: any;
    classes?: any;


const styles = (theme: Theme) => (
    test: 
        fontWeight: 400
    
);

class Menu extends React.Component<IProps, IState> 
    constructor(props: IProps) 
        super(props);
        this.state = 
            userName: localStorage.userName ? 'userName ' + localStorage.userName : "",
        
    
    render() 
        return (
            <div>
                <Grid container spacing=24>
                    <Grid item xs=12 className=this.props.classes.test>
                    <span>Test</test>
                    </Grid>
                </Grid>
            </div>
        );
    

【参考方案1】：

解决了：

const styles = (theme: Theme) => (
    test: 
        fontWeight: 400
     as React.CSSProperties
);

【讨论】：

为您的函数添加返回类型而不是将其强制转换为类型，将允许编译器验证类型而不是强制它。

@JohanLindskogen 主题来自 Material-UI，它本身使用 JSS。主题期待 React.CSSProperties，否则将给出上述不兼容的异常。必须为方法中的每个新对象设置它。

哦，我明白了。 Material-UI 现在建议使用createStyles 函数顺便说一句，material-ui.com/guides/typescript

【参考方案2】：

目前接受的这个问题的答案只是一种解决方法。解决这个问题的正确方法是使用 Material-UI 中的createStyles 函数。

const styles = (theme: Theme) => createStyles(
    test: 
        fontWeight: 400
    
);

请参阅material UI documentation。