React 中的 Typescript 状态类型是什么答案

【问题标题】：What is the Typescript type of state in ReactReact 中的 Typescript 状态类型是什么
【发布时间】：2023-03-24 22:09:01
【问题描述】：

当我使用 any 将我用 typescript 编写的 React 应用程序中的 state 传递给函数时出现 tslint 错误。

no-any：“any”的类型声明失去了类型安全性。考虑用更精确的类型替换它。

class AssetDrillDown extends React.Component<{}, IDetailsListAssetsState> {

constructor(props: {}) {
  super(props);

  this.state = {
    items: _items
  };
}

public componentDidMount(): void {
    this.getData(this);
}

public getData(that: any): void {
    // not relevant code
    that.setState({items: _items});
}
}

我不想使用any，而是使用一个类型来解决这个问题。我该怎么做，请指导。

【问题讨论】：

标签： typescript

【解决方案1】：

你已经指定了react组件的状态是IDetailsListAssetsState。

因此，如果你在函数中传递状态，你可以这样做：

public getData(that: IDetailsListAssetsState): void {
  // now you can read `that.items`
  ...
}

但是，getData 的代码表明，如果你想传递 AssetDrillDown 实例而不是状态 that.setState({items: _items});

然后你会做一些链接这个：

public getData(that: AssetDrillDown): void {
  // now you can read that.state.items
  ...
}

注意：尽管您的代码示例可能是有原因的，但没有必要将类的实例传递给同一个类方法。您可以像这样简单地访问状态。

public getData(): void {
  this.state.items
}

【讨论】：

【解决方案2】：

您应该将状态定义为接口，您可以在其中以类型安全的方式定义您的类所期望的，很好地解释了here。

props 接口是泛型菱形运算符中的第一个参数，状态是第二个参数。

interface IHelloFormProps {
    name: string;
    handleChange(event: any): void;
}
interface IHelloFormState {
    inputName: string;
}
...
export default class HelloForm extends React.Component<IHelloFormProps, IHelloFormState> {
...

【讨论】：