TypeScript与React类组件完全指南

TypeScript与React类组件完全指南

react 项目地址: https://gitcode.com/gh_mirrors/reactt/react-typescript-cheatsheet

TypeScript为React类组件提供了强大的类型支持，让开发者能够构建更健壮、可维护的React应用。本文将深入探讨如何在使用TypeScript时高效地编写React类组件。

基础类型定义

在TypeScript中，React.Component是一个泛型类型，需要提供props和state的类型参数：

interface MyProps {
  message: string;
}

interface MyState {
  count: number;
}

class App extends React.Component<MyProps, MyState> {
  state: MyState = {
    count: 0
  };
  
  render() {
    return (
      <div>
        {this.props.message} {this.state.count}
      </div>
    );
  }
}

为什么需要双重状态注解？

你可能注意到我们在两个地方定义了状态类型：泛型参数和类属性。这样做有两个好处：

1. 提供更好的类型推断，访问this.state时能获得准确的类型提示
2. 确保this.setState()正常工作，因为它来自基类实现

方法类型定义

类方法需要像普通TypeScript方法一样进行类型注解：

class Counter extends React.Component<{}, {count: number}> {
  state = { count: 0 };
  
  increment = (amount: number) => {
    this.setState(prevState => ({
      count: prevState.count + amount
    }));
  };

  render() {
    return (
      <button onClick={() => this.increment(1)}>
        Count: {this.state.count}
      </button>
    );
  }
}

类属性定义

如果需要定义类属性（非状态），可以这样声明：

class Timer extends React.Component {
  private timerID: number; // 类属性声明
  
  componentDidMount() {
    this.timerID = window.setInterval(() => {
      // 定时器逻辑
    }, 1000);
  }
  
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  
  render() {
    return <div>Timer Component</div>;
  }
}

关于readonly的说明

你可能会看到一些示例代码在props和state类型中使用readonly修饰符：

interface Props {
  readonly message: string;
}

实际上这是不必要的，因为React.Component<P, S>已经将它们标记为不可变的。TypeScript会自动确保props和state的不可变性。

getDerivedStateFromProps的类型定义

在使用getDerivedStateFromProps生命周期方法时，有几种类型定义方式：

1. 显式定义返回类型：

class Comp extends React.Component<Props, State> {
  static getDerivedStateFromProps(
    props: Props,
    state: State
  ): Partial<State> | null {
    // 返回部分状态或null
  }
}

2. 让返回值决定状态类型：

class Comp extends React.Component<
  Props,
  ReturnType<typeof Comp["getDerivedStateFromProps"]>
> {
  static getDerivedStateFromProps(props: Props) {
    // 返回状态
  }
}

3. 结合其他状态字段和记忆化：

type CustomValue = any;

interface Props {
  propA: CustomValue;
}

interface DefinedState {
  otherField: string;
}

type State = DefinedState & ReturnType<typeof transformPropsToState>;

function transformPropsToState(props: Props) {
  return {
    savedPropA: props.propA, // 用于记忆化比较
    derivedState: props.propA
  };
}

class Comp extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      otherField: "default",
      ...transformPropsToState(props)
    };
  }

  static getDerivedStateFromProps(props: Props, state: State) {
    if (props.propA === state.savedPropA) return null;
    return transformPropsToState(props);
  }
}

最佳实践建议

1. 优先使用函数组件和Hooks，除非有特殊需求必须使用类组件
2. 对于复杂组件，将props和state的类型定义单独提取到类型文件中
3. 避免过度使用getDerivedStateFromProps，考虑使用Hooks替代
4. 利用TypeScript的泛型特性创建可复用的高阶组件

通过合理运用TypeScript的类型系统，你可以构建出类型安全、易于维护的React类组件，大大减少运行时错误的发生概率。

react 项目地址: https://gitcode.com/gh_mirrors/reactt/react-typescript-cheatsheet