如何使用 TypeScript 中的对象解构为构造函数中的 class 级属性赋值？

Question

我正在为我的 React 项目使用 Typescript。因此我在构造函数中传递道具。我想在构造函数中破坏“props”并想将它分配给 class 级变量。

这是我的代码 -

abstract class IProps{
abstract type:'text'|'checkbox'|'radio';
abstract value?: any;
abstract name?: string;
abstract id?:string;
abstract onClick?: ((event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void);
abstract onChange?:((val: any) => void);
abstract classnames: string;
abstract placeholder?: any;
}
interface InputProps extends IProps{
    isvalid?: boolean;
}

export class Input extends Component<InputProps>{

    isvalid: boolean|undefined=true;
iProps: IProps|null = null;

constructor(props: InputProps){
    super(props);
    console.log(this.props);
    const {isvalid, ...iProps} = this.props;
    this.isvalid = isvalid;
    this.iProps = iProps;        
    }
}

构造函数中的这些语句对我有用。

 const {isvalid, ...iProps} = this.props;
    this.isvalid = isvalid;
    this.iProps = iProps;

但我想在不使用 const 语句的情况下赋值。我想做这样的事情 -

{isvalid: this.isvalid, ...iProps: this.iProps} = this.props;

如何赋值？

Answer 1

因为它以 { 开头，您需要通过将其包装在 ():

中来告诉解析器它是一个表达式，而不是块的开头

({isvalid: this.isvalid, ...this.iProps} = this.props);

Playground example -

class Example extends React.Component<InputProps> {
  isvalid: boolean;
  iProps: Partial<InputProps> = {}; // <=== Without the `= {}`, the assignment in
                                    // the constructor gets what seems to be an
                                    // erroneous error about trying to use iProps
                                    // before it's initialized
  constructor(props: InputProps){
    super(props);
    ({isvalid: this.isvalid, ...this.iProps} = this.props);
  }
}

这是一个简化的 JavaScript 版本，您可以在此处运行 SO:

class Example {
    constructor(props){
        ({isvalid: this.isvalid, ...this.iProps} = props);
    }
}
console.log(new Example({isvalid: false, a: 42, b: "example"}));

如何使用 TypeScript 中的对象解构为构造函数中的 class 级属性赋值？

How to assign values to class level properties in constructor using Object Destructuring in TypeScript?

javascript

typescript

reactjs

object-destructuring