如何在带有 TypeScript 接口的 React 组件中描述方法? [英] How to describe the method in a React component with interface of TypeScript?

问题描述

我是打字稿的大一新生.我不明白我的代码中的这个错误.

I am a freshman with typescript. I don't understand this error in my code.

我使用 IProps 来描述类的道具.为什么打字稿会检查这个类的方法?我该如何解决这个问题?

I use the IProps to describle the props of the class. Why does the typescript check the method of this class ? How can I solve this problem?

    export interface IProps extends FormComponentProps {
      dispatch: Dispatch<any>;
      loading: any;
    }

    @Form.create()
    @connect(({ global, loading }) => ({ global, loading }))
    export default class MessageBoard extends PureComponent<IProps> {
      state = {
        activated: false,
      };

      deactivate = () => {
        this.setState({ activated: true });
      };
      ...
      render() {
        ...
        return (...);
      }
    }

推荐答案

TypeScript 要求类装饰器不能改变类的类型，许多 React 高阶组件在无类型 JavaScript 中经常用作装饰器，不符合有了这个规则.不要将 connect 和 Form.create 作为装饰器调用，而是尝试将它们作为函数调用并导出结果:

TypeScript requires that a class decorator not change the type of the class, and many React higher-order components that are often used as decorators in untyped JavaScript do not comply with this rule. Instead of calling connect and Form.create as decorators, try calling them as functions and exporting the result:

class MessageBoard extends PureComponent<IProps> { ... }

export default Form.create()(
  connect(({ global, loading }) => ({ global, loading }))(
    MessageBoard));

这篇关于如何在带有 TypeScript 接口的 React 组件中描述方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！