打字稿:'字符串| undefined' 不可分配给类型 'string'
Posted
技术标签:
【中文标题】打字稿:\'字符串| undefined\' 不可分配给类型 \'string\'【英文标题】:TypeScript: 'string | undefined' is not assignable to type 'string'打字稿:'字符串| undefined' 不可分配给类型 'string' 【发布时间】:2019-04-10 16:20:58 【问题描述】:我正在使用 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
总是返回一个字符串(即使它是空的)。此外,还始终定义了 classes.disabled,因为它包含在我的 styles
中。
我该如何解决这个问题?我正在严格模式下开发,所以这个 linter hickup 会使我的应用程序崩溃。
【问题讨论】:
【参考方案1】:发现自己的错误??♂️ 我不小心又写了<Input />
而不是<MUIInput />
。
<MUIInput
classes=
disabled: classes.disabled,
input: inputClasses,
root: marginTop,
underline: underlineClasses
id=id
...inputProps
/>
【讨论】:
【参考方案2】:问题是,对象上的属性可以是未定义的,在这种情况下您输入的 prop 需要一个字符串,因此,解决方法是:
classes=
disabled: classes.disabled,
input: inputClasses,
root: marginTop,
underline: underlineClasses || ''
【讨论】:
感谢您的帮助。不幸的是,这并不能解决问题。阅读您的答案后,我尝试了两个:classes.disabled || 'false'
和classes.disabled || 'undefined'
。我还尝试将这些按字面意思传递为false
或undefined
(不是字符串)。错误仍然存在。
您的问题出在 disabled 或 underline 属性上?以上是关于打字稿:'字符串| undefined' 不可分配给类型 'string'的主要内容,如果未能解决你的问题,请参考以下文章
使用反应成帧器类型'()=> void'的打字稿错误不可分配给类型'未定义'
打字稿类型'字符串| null' 不可分配给类型 'string'