ReactJs / Typescript：如何扩展状态接口

IT技术 javascript reactjs typescript
2022-07-15 00:51:38

我有以下内容：

interface EditViewState<T> {
    entity?: T;
}

abstract class EditView<T, P, S> extends React.Component<P, EditViewState<T> & S> {

  constructor(props: P, ctx: any) {
      super(props, ctx);
      this.state = {
          mode: "loading" // Type '{ entity: null; }' is not assignable to type 'Readonly<EditViewState<T> & S>'.ts(2322
      }
  }
 componentDidMount() {
      this.setState({ mode: "show" }) // Type '"show"' is not assignable to type '("loading" & S["mode"]) | ("show" & S["mode"]) | ("edit" & S["mode"])'.ts(2345)
  }
}

我如何使用EditViewState和扩展S来自具体类的它？

1个回答

现在我有一个解决方法，方法是使用Exclude 

abstract class EditView<T, P, S> extends React.Component<P, Exclude<EditViewState<T> & S, keyof S>> {

 constructor(props: P, ctx: any) {
      super(props, ctx);
      //@ts-ignore https://github.com/microsoft/TypeScript/issues/38947
      this.state = {
          mode: "loading"
      }
  }

  componentDidMount() {
      this.setState({ mode: "show" })
  }
}

有了这个，一切都完美无缺。concrete 类现在可以自动完成 of 的状态EditViewState和它自己的 states S。

其它你可能感兴趣的问题
上一篇使用demo或root的目的是什么 下一篇React Axios，无法读取 axios 响应中的 Set-Cookie 标头