Question

以下代码将产生打字稿错误：

“Class'Component'定义实例成员函数'componentWillMount'，但扩展类'Pages'定义它作为实例成员属性。“

  interface IProps {
     history?: any
  }

  interface IState {
    mql: MediaQueryList
    sidebarDocked: boolean
    sidebarOpen: boolean
  }

export class Pages extends Component<IProps, IState> {

  componentWillMount = () => {
    mql.addListener(this.mediaQueryChanged)
    this.setState({ mql: mql, sidebarDocked: mql.matches })
  }

  componentWillUnmount = () => {
    this.state.mql.removeListener(this.mediaQueryChanged)
  }
  ...
}

但是，非生命周期方法将使用es6箭头表示法正常运行：

  mediaQueryChanged = () => {
    const { setDockMode } = this.props
    this.setState({ sidebarDocked: this.state.mql.matches })
  }

错误通知我Pages是一个定义实例成员的类。所以我的问题基本上归结为“如何使用es6箭头符号来编写打字稿实例成员？”

我还应该提到常规函数表示法正常运行，但是我必须关注自己绑定它。到目前为止，我已经成功地只使用了React的箭头符号，但是Typescript似乎毁了它。

Answer 1

在查看Typescript的文档时，我发现在生命周期方法之前添加private会导致错误消失。但是，我仍然不知道为什么会这样。根据我的理解，private关键字限制了外部方法对类的访问。这就是我现在所知道的。当我有更多信息时会更新。

更新1

将private附加到生命周期方法不解决问题。该错误改为电影到类名并说明：

类'Pages'错误地扩展了基类'Component'。属性“componentWillMount”在类型上是私有的 'Pages'但不在'Component'类型中。

我在node_modules文件夹（index.d.ts）中找到了reactcriptcript类型，并找到了定义Component的接口的位置：

interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> { }

我看到它扩展了ComponentLifecycle接口：

interface ComponentLifecycle<P, S, SS = any> extends NewLifecycle<P, S, SS>, DeprecatedLifecycle<P, S> {
    componentDidMount?(): void;
    shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
    **componentWillUnmount?(): void;**
    componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
}

在该界面中，componentWillUnmount定义为：

componentWillUnmount?(): void;

所以，我的问题是，为什么打字稿不能识别componentWillUnmount? = (): void => {};作为componentWillUnmount?(): void;的替代

React的生命周期方法如何用带有es6箭头符号的Typescript编写？

1 个答案: