时间戳

首页 > 解决方案 > 为什么泛型与 Typescript 中的类组件一起使用

reactjs - 为什么泛型与 Typescript 中的类组件一起使用

问题描述

我正在使用 Typescript 学习 React，因为我想创建类组件，结果我们需要使用这样的泛型：

type MyProps = {
  // using `interface` is also ok
  message: string;
};
type MyState = {
  count: number; // like this
};
class App extends React.Component<MyProps, MyState> {
  state: MyState = {
    // optional second annotation for better type inference
    count: 0,
  };
  render() {
    return (
      <div>
        {this.props.message} {this.state.count}
      </div>
    );
  }
}

好的，正如我的研究所说，泛型有助于实现可重用性，例如，当我们使用这样的泛型创建函数时：

function identity<T>(arg: T): T {
    return arg;
}

但是我无法理解的是为什么我们需要在这里使用泛型class App extends React.Component<MyProps, MyState>？

标签： reactjstypescript

解决方案

重用不是这里的主要关注点，即使React.Component在这种情况下被重用。

泛型有不同的用途，即允许以类型安全的方式自定义 props 和 state 成员。请记住，Typescript 在 Javascript 之上添加了类型安全性，因此必须使用类型定义类成员等。

在您的示例中，如果没有您的MyState类型，则不知道组件应为其状态成员使用什么信息，并且当您使用this.state.count. Typescript 只有在知道实际应该存在什么时才能确保正确性。

旁注：React 本身具有提供类型安全的机制，即使没有 Typescript。您可以在 React 主页上找到有关PropTypes的更多信息。但我会随时推荐 Typescript PropTypes。

推荐阅读