React TypeScript 开发实践

一、基础知识

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React allows developers to create reusable UI components and is widely used in web and mobile app development. TypeScript is a programming language that is a superset of JavaScript and adds static typing, interfaces, and other features to the language. TypeScript enhances the development experience in React by providing type checking and improving code readability and maintainability. With TypeScript, it is easier to catch errors during development and refactor code as projects grow in complexity.

在安装 TypeScript 时，可以选择直接使用 create-react-app 脚手架。在使用 create-react-app 时加上 --template typescript 参数即可：

npx create-react-app my-app --template typescript

二、函数组件

React 中的函数组件是一种无状态的组件，可以通过函数输入来返回 JSX 元素。 在 TypeScript 中，函数组件需要使用泛型来定义输入的类型和返回值的类型。

interface Props {
  name: string;
}

const Greeting: React.FC
    = ({name}) => (
  <div>Hello {name}</div>
);

   

在函数组件中，React 提供了一些 hooks 来实现组件状态管理和生命周期管理。 在 TypeScript 中，需要根据 hooks 的类型来定义与 hooks 相关的变量和参数类型。

import React, { useState, useEffect } from 'react';

interface Props {
  name: string;
}

const Greeting: React.FC
    = ({name}) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <div>Hello {name}! You clicked {count} times.</div>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

   

三、类组件

React 中类组件继承自 React.Component 类，可以使用类属性和生命周期方法来管理组件状态和生命周期。 在 TypeScript 中，需要定义 Props 和 State 接口来规范输入和状态的类型。

interface Props {
  name: string;
}

interface State {
  count: number;
}

class Greeting extends React.Component
    {
  constructor(props: Props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <div>Hello {this.props.name}! You clicked {this.state.count} times.</div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

   

四、组件通信

在 React 中，组件间的通信可以通过 props 和 Context API 来实现。 在 TypeScript 中，需要定义接口来规范 props 和 context 的类型。

interface AppProps {
  title: string;
}

const App: React.FC<AppProps> = ({title}) => (
  <div>
    <Header title={title} />
    <Main />
  </div>
);

interface HeaderProps {
  title: string;
  subtitle?: string;
}

const Header: React.FC<HeaderProps> = ({title, subtitle}) => (
  <div>
    <h1>{title}</h1>
    {subtitle && <h2>{subtitle}</h2>}
  </div>
);

interface ThemeContextProps {
  theme: 'light' | 'dark';
}

const ThemeContext = React.createContext<ThemeContextProps>({
  theme: 'light',
});

const Main: React.FC = () => (
  <div>
    <ThemeContext.Provider value={{ theme: 'light' }}>
      <Content />
    </ThemeContext.Provider>
  </div>
);

const Content: React.FC = () => {
  const { theme } = React.useContext(ThemeContext);
  return (
    <div style={{ backgroundColor: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      <p>This is the main content.</p>
    </div>
  );
};

五、组件库

在 React 中，组件库可以帮助开发者快速搭建项目 UI。 Ant Design 是一个流行的开源组件库，提供了丰富的 UI 组件和可配置的样式主题，适用于 Web 和移动端项目。 在 TypeScript 中，Ant Design 提供了 Typed API 来提供完整的类型推断和代码提示。

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'antd';

ReactDOM.render(<Button type="primary">Click me!</Button>, document.getElementById('root'));

六、总结

React TypeScript 是一种支持静态类型检查的开发方式，可以提高项目的可维护性和开发效率。 在 React TypeScript 开发中，可以使用函数组件和类组件来实现组件状态和生命周期管理，使用 props 和 Context API 来实现组件通信，使用组件库来快速搭建项目 UI。 使用 TypeScript 可以更好地规范和管理代码，减少代码错误和维护成本。