TypeScript:'string | undefined' 不可分配给类型 'string'
TypeScript: 'string | undefined' is not assignable to type 'string'
我正在使用 TypeScript 编写 React 应用程序。我使用 material-ui 作为我的组件。我目前正在为 material-ui 的输入编写包装器,如下所示:
import FormControl, { FormControlProps } from "@material-ui/core/FormControl";
import MUIInput, { InputProps } from "@material-ui/core/Input";
import InputLabel, { InputLabelProps } from "@material-ui/core/InputLabel";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import classNames from "classnames";
import React, { PureComponent, ReactNode } from "react";
import styles from "./styles";
export interface OwnProps {
labelText?: ReactNode;
labelProps?: InputLabelProps;
id?: string;
inputProps?: InputProps;
formControlProps?: FormControlProps;
inputRootCustomClasses?: string;
success?: boolean;
white?: boolean;
error?: boolean;
}
export interface Props extends WithStyles<typeof styles>, OwnProps {}
export class Input extends PureComponent<Props> {
render() {
const {
classes,
formControlProps,
labelText,
id,
labelProps,
inputProps,
error,
white,
inputRootCustomClasses,
success
} = this.props;
const labelClasses = classNames({
[" " + classes.labelRootError]: error,
[" " + classes.labelRootSuccess]: success && !error
});
const underlineClasses = classNames({
[classes.underlineError]: error,
[classes.underlineSuccess]: success && !error,
[classes.underline]: true,
[classes.whiteUnderline]: white
});
const marginTop = classNames({
[inputRootCustomClasses!]: inputRootCustomClasses !== undefined
});
const inputClasses = classNames({
[classes.input]: true,
[classes.whiteInput]: white
});
let formControlClasses;
if (formControlProps !== undefined) {
formControlClasses = classNames(formControlProps.className, classes.formControl);
} else {
formControlClasses = classes.formControl;
}
return (
<FormControl {...formControlProps} className={formControlClasses}>
{labelText !== undefined ? (
<InputLabel
className={classes.labelRoot + " " + labelClasses}
htmlFor={id}
{...labelProps}
>
{labelText}
</InputLabel>
) : null}
<Input
classes={{
disabled: classes.disabled,
input: inputClasses,
root: marginTop,
underline: underlineClasses
}}
id={id}
{...inputProps}
/>
</FormControl>
);
}
}
export default withStyles(styles)(Input);
我对这个 <Input />
的属性有疑问:
classes={{
disabled: classes.disabled,
input: inputClasses,
root: marginTop,
underline: underlineClasses
}}
对于禁用,inputt 抛出错误:
[ts]
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.
我不知道如何解决这个问题。我试过 as
:
underline: underlineClasses as string
无效。我尝试使用 !
运算符来断言非空,但它不起作用。最奇怪的是函数 classNames
总是 returns 一个字符串(即使它是空的)。此外 classes.disabled 也总是被定义,因为它包含在我的 styles
.
中
我该如何解决这个问题?我在严格模式下开发,所以这个 linter 故障导致我的应用程序崩溃。
问题是,对象上的 属性 可以是未定义的,在这种情况下您输入的 prop 需要一个字符串,所以解决方法是:
classes={{
disabled: classes.disabled,
input: inputClasses,
root: marginTop,
underline: underlineClasses || ''
}}
发现我自己的错误♂️我不小心又写了<Input />
而不是<MUIInput />
。
<MUIInput
classes={{
disabled: classes.disabled,
input: inputClasses,
root: marginTop,
underline: underlineClasses
}}
id={id}
{...inputProps}
/>
我正在使用 TypeScript 编写 React 应用程序。我使用 material-ui 作为我的组件。我目前正在为 material-ui 的输入编写包装器,如下所示:
import FormControl, { FormControlProps } from "@material-ui/core/FormControl";
import MUIInput, { InputProps } from "@material-ui/core/Input";
import InputLabel, { InputLabelProps } from "@material-ui/core/InputLabel";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import classNames from "classnames";
import React, { PureComponent, ReactNode } from "react";
import styles from "./styles";
export interface OwnProps {
labelText?: ReactNode;
labelProps?: InputLabelProps;
id?: string;
inputProps?: InputProps;
formControlProps?: FormControlProps;
inputRootCustomClasses?: string;
success?: boolean;
white?: boolean;
error?: boolean;
}
export interface Props extends WithStyles<typeof styles>, OwnProps {}
export class Input extends PureComponent<Props> {
render() {
const {
classes,
formControlProps,
labelText,
id,
labelProps,
inputProps,
error,
white,
inputRootCustomClasses,
success
} = this.props;
const labelClasses = classNames({
[" " + classes.labelRootError]: error,
[" " + classes.labelRootSuccess]: success && !error
});
const underlineClasses = classNames({
[classes.underlineError]: error,
[classes.underlineSuccess]: success && !error,
[classes.underline]: true,
[classes.whiteUnderline]: white
});
const marginTop = classNames({
[inputRootCustomClasses!]: inputRootCustomClasses !== undefined
});
const inputClasses = classNames({
[classes.input]: true,
[classes.whiteInput]: white
});
let formControlClasses;
if (formControlProps !== undefined) {
formControlClasses = classNames(formControlProps.className, classes.formControl);
} else {
formControlClasses = classes.formControl;
}
return (
<FormControl {...formControlProps} className={formControlClasses}>
{labelText !== undefined ? (
<InputLabel
className={classes.labelRoot + " " + labelClasses}
htmlFor={id}
{...labelProps}
>
{labelText}
</InputLabel>
) : null}
<Input
classes={{
disabled: classes.disabled,
input: inputClasses,
root: marginTop,
underline: underlineClasses
}}
id={id}
{...inputProps}
/>
</FormControl>
);
}
}
export default withStyles(styles)(Input);
我对这个 <Input />
的属性有疑问:
classes={{
disabled: classes.disabled,
input: inputClasses,
root: marginTop,
underline: underlineClasses
}}
对于禁用,inputt 抛出错误:
[ts]
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.
我不知道如何解决这个问题。我试过 as
:
underline: underlineClasses as string
无效。我尝试使用 !
运算符来断言非空,但它不起作用。最奇怪的是函数 classNames
总是 returns 一个字符串(即使它是空的)。此外 classes.disabled 也总是被定义,因为它包含在我的 styles
.
我该如何解决这个问题?我在严格模式下开发,所以这个 linter 故障导致我的应用程序崩溃。
问题是,对象上的 属性 可以是未定义的,在这种情况下您输入的 prop 需要一个字符串,所以解决方法是:
classes={{
disabled: classes.disabled,
input: inputClasses,
root: marginTop,
underline: underlineClasses || ''
}}
发现我自己的错误♂️我不小心又写了<Input />
而不是<MUIInput />
。
<MUIInput
classes={{
disabled: classes.disabled,
input: inputClasses,
root: marginTop,
underline: underlineClasses
}}
id={id}
{...inputProps}
/>