reactjs - 使用 typescript react 在构造函数中声明一个属性

Question

从 draft-js 文档中，可以(在 vanilla React 中，没有 typescript )设置 Draft-js 环境，注意 onChange 属性可以直接在构造函数中声明:

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    const {editorState} = this.state;
    return <Editor editorState={editorState} onChange={this.onChange} />;
  }
}

但是，当我尝试对 Typescript/React(下面的代码)执行相同操作时，出现此错误

错误 TS2339:属性“onChange”在类型“Main”上不存在。

class Main extends React.Component<MainProps, MainState> {

    constructor(props) {
    super(props);
    this.state = { todos: [], editorState: EditorState.createEmpty() };
    this.onChange = (editorState) => this.setState({ editorState });
  }

我还尝试将 onChange 作为属性添加到 props

interface MainProps {
    model: Model;
    onChange: Function;
}

在 typescript/react 中声明这样一个函数属性的合适方法是什么？

Answer 1

试试这个:

class Main extends React.Component<MainProps, MainState> {
    constructor(props) {
        super(props);
        this.state = { todos: [], editorState: EditorState.createEmpty() };
        this.onChange = (editorState) => this.setState({ editorState });
    }

    onChange: (state: MainState) => void;

}

我还没有测试过，但我认为它应该可以工作。

---

编辑

是的，那里有个问题我没有注意到，应该是:

class Main extends React.Component<MainProps, MainState> {
    constructor(props) {
        super(props);

        this.state = { todos: [], editorState: EditorState.createEmpty() };
        this.onChange = (editorState) => this.setState({
            editorState: editorState
        } as MainState);
    }

    onChange: (state: MainState) => void;

}

type assertion如果 todos 属性不是可选的，则需要 (as MainState)，如果它是可选的 (todos?: any[]) 则有不需要断言。

至于似乎与onChange 定义重复的部分，在Mixins part of the typescript docs 中有简要说明。 ，但在您的示例中，类中的定义:

onChange: (state: MainState) => void;

让编译器知道 Main 的实例有一个名为 onChange 的方法，它接收一个 MainState 并返回 void.
但是这个方法的实现只有在ctor中创建实例时才会赋值:

this.onChange = (editorState) => this.setState({ editorState });

如果缺少定义，则 ctor 中的赋值将产生编译错误:property 'onChange' does not exist on type 'Main'。