打字稿:'字符串| 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);

我对此&lt;Input /&gt; 的属性有疑问:

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】:

发现自己的错误??‍♂️ 我不小心又写了&lt;Input /&gt; 而不是&lt;MUIInput /&gt;

<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'。我还尝试将这些按字面意思传递为falseundefined(不是字符串)。错误仍然存​​在。 您的问题出在 disabled 或 underline 属性上?

以上是关于打字稿:'字符串| undefined' 不可分配给类型 'string'的主要内容,如果未能解决你的问题,请参考以下文章

使用反应成帧器类型'()=> void'的打字稿错误不可分配给类型'未定义'

打字稿 - 字符串'不可分配给类型'FC

打字稿类型'字符串| null' 不可分配给类型 'string'

打字稿类型“数字”不可分配│键入“字符串”

打字稿:“RegExpMatchArray”类型的参数不可分配给“字符串”类型的参数

打字稿错误 TS2345 错误:TS2345:“缓冲区”类型的参数不可分配给“字符串”类型的参数