【深度】React 怎么和 TypeScript 结合使用 ?

站长

2023年10月10日 13:35 · 阅读数 55

前置说明

React 和 TypeScript 结合在当前的前端开发中已经应用的十分广泛了，React 官方的新文档中也明确给出了 React 结合 TypeScript 使用（以函数组件为主），参考 Using TypeScript – React

这篇文章主要总结一些 React 集合 TypeScript 使用的一些经验。（由于历史原因，本文包括类组件和函数组件的一些概念）

准备工作：

依赖安装

在 React 工程化项目配置中，需要安装 react和 react-dom对应的类型声明依赖（注意对应的版本!）。

# npm 安装
npm install --save-dev @types/react @types/react-dom

# yan 安装
yarn add -D @types/react @types/react-dom

配置 `tsconfig.json`

在编写 React + TypeScript 项目之前，需要配置一下 tsconfig.json:

"lib" 选项是一个数组，并且里面必须包括了 "dom"
"jsx" 选项必须配置一个合法的并且符合当前项目的选项（"jsx", "react-jsx", "preserve"）
- 其中"preserve"， "react-jsx"在大部分的项目都足以使用；
- 如果你想开发一个 react 的工具库，官方文档建议使用 "jsx"

文件后缀

编写 React + TypeScript 的项目，所有的组件文件都是 *.tsx；非组件使用*.ts

理解：

tsx是一个集成词汇，前面的 ts 指代的是文件里面需要使用 ts 的语法，后面的 sx表示里面需要使用到 jsx 标签

在类组件结合 TypeScript 使用

基本写法

在 TypeScript 中编写一个类组件，需要注意：

类组件必须要继承 React 提供的 Component父类

【深度】React 怎么和 TypeScript 结合使用 ?

实现的 render 方法必须要有符合 JSX.Element 条件的返回值

【深度】React 怎么和 TypeScript 结合使用 ?

如果在定义组件时限制 props 的类型，请在组件定义的第一个参数传递泛型定义。

/* 使用默认的方式配置组件的 props */

import React, { Component } from 'react';

interface IChild1Props {
  id: number;
  name: string;
}

class Child1 extends Component <IChild1Props> {
  render() {
    const { id, name } = this.props;

    return (
      <div className="child">
        <h2>{ id }</h2>
        <p>{ name }</p>
      </div>
    );
  }
}

但是，这样会把组件组件的用法限制死了。一旦组件的组成成分变得复杂，props 配置变得越来越多，这时固定的 props 配置就不太适用。我们可以使用 Partial和 Pick 来确定组件中的 props 哪一些是必传的，哪一些是不一定需要传递的:

/* 使用可选的方式配置组件的 props - Demo1 */

import React, { Component } from 'react';

interface IChild1Props {
  id: number;
  name: string;
}

// 这里使用了 Partial 后，外面组件调用时的 props 的所有值就都不是必传的了
// 但是为了组件的安全性起见，这里可能需要写一个函数配置一个兜底的值
class Child1 extends Component <Partial<IChild1Props>> {
  render() {
    const { id, name } = withDefaultProps(this.props, {
      id: 1,
      name: '张三'
    });

    return (
      <div className="child">
        <h2>{ id }</h2>
        <p>{ name }</p>
      </div>
    );
  }
}

function withDefaultProps<T>(origin: Partial<T>, initial: T): T {
  return {
    ...initial,
    ...origin
  };
}

/* 使用可选的方式配置组件的 props - Demo2 */

import React, { Component } from 'react';

interface IChild1Props {
  id: number;
  name: string;
  age: number;
}

// Pick 把所有可选的集合中的值挑选出来
// Pick 需要结合其他的类型一起使用
// 这个例子说明：id 是必填项，其他的参数是选填项
class Child1 extends Component <
  Pick<IChild1Props, 'id'> & Partial<Omit<IChild1Props, 'id'>>
> {
  render() {
    const { id, name } = this.props;

    return (
      <div className="child">
        <h2>{ id }</h2>
        <p>{ name }</p>
      </div>
    );
  }
}

注意

props 是组件调用时的配置选项，封装时请慎重使用泛型定义 !

如果组件初始化需要实现 constructor 方法，请在 constructor 的 props 属性中定义类型。

如果组件初始化需要实现 constructor 方法，请调用父类的构造方法初始化 props （super(props)）

如果在定义组件时限制 state 的类型，请在组件定义的第二个参数传递泛型定义。

interface IChild1Props {
  id: number;
  name: string;
}

interface IChild1State {
  age: number;
}

class Child1 extends Component <Partial<IChild1Props>, IChild1State> {
  state = {
    age: 18
  };

  render() {
    const { id, name } = withDefaultProps(this.props, {
      id: 1,
      name: '张三'
    });

    return (
      <div className="child">
        <h2>{ id }</h2>
        <p>{ name }</p>
      </div>
    );
  }
}

注意

Component 泛型的第二个参数对于原型上实现的 state 是一个弱类型检查（它只能够检测当前需要的 state，不能够检测额外的 state）

Component 泛型的第二个参数对于原型上实现的 state 是一个弱类型检查, 不实现 state 也不会报错！

如果想进行严格的 state 类型定义，请实现类组件的 constructor 方法

总结一下

使用 TypeScript 定义组件的 state 类型时，最好实现一下 constructor 方法

/* 1. 这样的写法仍然可以通过 (违反了规定定义 state) */

interface IChild1Props {
  id: number;
  name: string;
}

interface IChild1State {
  age: number;
}

class Child1 extends Component <Partial<IChild1Props>, IChild1State> {
  state = {
    age: 18,
    a: 1,
    b: 2,
    c: 3
  };

  render() {
    const { id, name } = withDefaultProps(this.props, {
      id: 1,
      name: '张三'
    });

    return (
      <div className="child">
        <h2>{ id }</h2>
        <p>{ name }</p>
      </div>
    );
  }
}

/* 2. 这样的写法仍然可以通过 (不定义 state) */

interface IChild1Props {
  id: number;
  name: string;
}

interface IChild1State {
  age: number;
}

class Child1 extends Component <Partial<IChild1Props>, IChild1State> {
  render() {
    const { id, name } = withDefaultProps(this.props, {
      id: 1,
      name: '张三'
    });

    return (
      <div className="child">
        <h2>{ id }</h2>
        <p>{ name }</p>
      </div>
    );
  }
}

/* 把 state 的定义限制在 constructor 中 */

interface IChild1Props {
  id: number;
  name: string;
}

interface IChild1State {
  age: number;
}

class Child1 extends Component <Partial<IChild1Props>, IChild1State> {
  constructor(props: Partial<IChild1Props>) {
    super(props);

    this.state = {
      age: 18
    };
  }

  render() {
    const { id, name } = this.props;
    const { age } = this.state;

    return (
      <div className="child1">
        <h2>{ id } : { name }</h2>
        <p>{ age }</p>
      </div>
    );
  }
}

事件定义

定义 React 事件需要注意：

定义 React 的事件不能够使用原生的事件定义（React 内部实现的是合成基础事件 (SBE)）
类组件绑定事件时，this 是指向绑定元素的；在组件事件中使用需要改变 this 指向 (也可以考虑使用 class fileds 定义类组件的方法)
e.target对应的类型是 EventTarget, 使用时需要判断并断言成 HTMLInputElement
React 无法直接绑定多个事件处理函数

import React, { Component, ChangeEvent } from 'react';

interface IInputDemoProps {
  initialValue?: string;
}

interface IInputDemoState {
  value: string;
}

class InputEventDemo <IInputDemoProps, IInputDemoState> {
  constructor(props) {
    super(props);

    this.state = {
      value: props.initialValue || ''
    };
  }

  handleValueChange(ev: ChangeEvent) {
      const tar = e.target as HTMLInputElement;
      const { value } = tar;
      this.setState({ value });
  }

  render() {
    const { value } = this.state;
    
    return (
      <div className="input-demo">
        <input
          type="text"
          placeholder="请输入内容"
          value={ value }
          onChange={ this.handleValueChange.bind(this) }
        />
      </div>
    );
  }
}

ref ：

在 React 的类组件，ref 的定义有几种：

使用 createRef 定义内部的 ref 值。结合 TypeScript 使用的话就给定一个泛型即可, 对应的类型是 RefObject<T>：

import React, {
  Component,
  ChangeEvent,
  createRef,
  RefObject // -------- step1
} from 'react';

interface IInputDemoProps {
  initialValue?: string;
}

interface IInputDemoState {
  value: string;
}

class InputEventDemo extends Component <
  IInputDemoProps, IInputDemoState
> {
  private inputRef: RefObject<HTMLInputElement>; // -------- step2

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

    this.state = {
      value: props.initialValue || ''
    };

    this.inputRef = createRef<HTMLInputElement>(); // -------- step3
  }

  handleValueChange(e: ChangeEvent) {
    const { value } = e.target as HTMLInputElement;

    this.setState({ value });
  }

  render() {
  	const { value } = this.state;
    
    return (
      <div className="input-demo">
        <p>
          <input
            ref={ this.inputRef } // -------- step4
            type="text"
            placeholder="请输入内容"
            value={ value }
            onChange={ this.handleValueChange.bind(this) }
          />
        </p>

        <p>CurrentValue: { value }</p>
      </div>
    );
  }
}

export default InputEventDemo;

使用 forwardRef 定义外部调用组件的 ref 值 (参考函数组件中使用 ref)
使用 ref 包裹不需要渲染更新的引用值数据

错误边界：

错误边界是 React 官方提出的用于捕获内部错误，并防止视图全面崩溃的一种解决方案。本质上来讲，错误边界就是一个实现了 static getDerivedStateFromError(errorInfo) 和 componentDidCatch(error, info) 的包裹组件。

import React, { Component, ReactNode } from 'react';

interface IProps {
  children?: ReactNode;
}

interface IState <Err extends Error = Error> {
  isError: boolean;
  errorInfo: Err;
}

export default class ErrorBoundary extends Component <IProps, IState> {
  constructor(props: IProps) {
    super(props);

    this.state = {
      isError: false,
      errorInfo: new Error(),
    };
  }

  static getDerivedStateFromError(errorInfo: Error) {
    return {
      isError: true,
      errorInfo
    };
  }

  override componentDidCatch(error: Error, errorInfo: any) {
    this.setState({
      isError: true,
      errorInfo
    });
  }

  render() {
    const { children } = this.props;
    const { isError, errorInfo } = this.state;

    if (isError) {
      // 渲染错误部分
      return (
        <div className="error-info">
          <h2>Something error</h2>
          <p>ErrorInfo: { errorInfo.message }</p>
        </div>
      );
    }
    return children;
  }
}

高阶组件

高阶组件是类组件逻辑功能复用的一种思想（类比高阶函数），本质上就是至少接受一个组件为参数并返回一个新组件的函数。

在 TypeScript 中，使用 ComponentType对高阶组件进行定义：

import React, { Component, ComponentType } from 'react';

interface IState {
  theme?: 'light' | 'dark' | 'system'
}

export function withColorTheme<P = {}>(WrappedComp: ComponentType<P>) {
  class Wrapper extends Component <P & Partial<IState>, IState> {
    static displayName: string;

    constructor(props: P & Partial<IState>) {
      super(props);

      this.state = {
        theme: props.theme || 'light'
      };
    }

    render() {
      const props = this.props;
      const { theme } = this.state;
      
      return (
        <div className={ `wrapped_with_color_theme theme-${theme}` }>
          <WrappedComp { ...props } />
        </div>
      );
    }
  }

  const displayName = `ColorTheme_${WrappedComp.displayName || WrappedComp.name}`;
  Wrapper.displayName = displayName;
  return Wrapper;
}

Context:

Context API 是 React 中提出的一种非标准的传递数据和方法的重要 API。

Context 定义：在 createContext方法中传入泛型定义即可（不传入则交给 createContext 函数进行类型推断）

import { createContext } from 'react';

interface IThemeContext {
  theme: 'dark' | 'light' | 'system'
}

export const ThemeContext = createContext<IThemeContext>({
  theme: 'light'
});

<Context.Provider>: 按照 Context 定义时传值即可：

import React, { Component, ReactNode } from 'react';
import { ThemeContext } from '../libs/context';

interface IProps {
  children: ReactNode;
}

interface IState {
  theme: 'dark' | 'light' | 'system'
}

export default class ContextDemo extends Component <IProps, IState> {
  constructor(props: IProps) {
    super(props);

    this.state = {
      theme: 'light'
    };
  }

  setTheme(theme: 'dark' | 'light' | 'system') {
    this.setState({
      theme
    });
  }
  
  render() {
    const { children } = this.props;
    const { theme } = this.state;
    const contextValue = { theme };

    return (
      <ThemeContext.Provider value={ contextValue }>
        { children }
      </ThemeContext.Provider>
    );
  }
}

<Context.Consumer> ：直接使用即可

<ThemeContext.Consumer>
  {
    ({ theme }) => {
      const themeName = theme === 'light'
                      ? '浅色主题'
                      : theme === 'dark'
                      ? '深色主题'
                      : '跟随系统主题';

      return (
        <>
          当前的主题：{themeName}
        </>
      )
    }
  }
</ThemeContext.Consumer>

static contextType & this.context : 给 contextType 指定的泛型，并且直接使用即可

class Demo extends React.Component <{}, {}> {
  static contextType = ThemeContext;

  override context: IThemeContext = { theme: 'dark' };

  render() {
    const { theme } = this.context;
    const themeName = theme === 'light'
                    ? '浅色主题'
                    : theme === 'dark'
                    ? '深色主题'
                    : '跟随系统主题';
    return (
      <p>当前的主题：{ themeName }</p>
    );
  }
}

在函数组件中结合 TypeScript 使用

组件本身定义：

在 React + TypeScript 中，建议：

使用箭头函数对 React 组件进行定义
定义箭头函数使用 FC 声明函数组件 (便于 React DevTool 的功能调试)
返回值默认是 JSX.Element (精确一点可以使用 ReactNode 或者 ReactElement)
函数组件的 props 值需要从 FC 的泛型传入

import React, { FC, ReactElement } from 'react';

const FCTest: FC<Record<string, any>> = (props): ReactElement => {

  return (
    <div>
      <h2>FCTest</h2>
    </div>
  );
}

hooks 定义：

useState

在 useState 中，添加泛型给 initialState 的传值进行定义：

const [count, setCount] = useState<number>(0);

一般情况下，简单的原始值是不需要写入泛型的；需要写入泛型的情况包含了以下几种：

useState 接收了复杂的数据类型 (复杂的对象，数组, Map ...)

interface IStudent {
  name: string;
  age: number;
  score: number;
  hobbies: string[];
}

const [stuState, setStuState] = useState<IStudent>({
  name: 'zhangsan',
  age: 18,
  score: 100,
  hobbies: ['study'],
});

useState 的 state 值可能会有多种情况 (e.g string | number)

const [info, setInfo] = useState<string | number>('');

useReducer

useReducer 可以理解成是 useState 的升级版，它使用了一种派发器的思想来处理复杂的 state 操作。在以下例子中，在几个关键位置使用了 TypeScript：

interface State 描述了 reducer state 的类型。
type CounterAction 描述了可以 dispatch 至 reducer 的不同 action。
const initialState: State 为初始 state 提供类型，并且也将成为 useReducer 默认使用的类型。
stateReducer(state: State, action: CounterAction): State 设置了 reducer 函数参数和返回值的类型。

import { useReducer } from 'react';

interface State {
   count: number 
};

type CounterAction =
  | { type: 'reset' }
  | { type: 'setCount'; value: State['count'] }

const initialState: State = { count: 0 };

function stateReducer(state: State, action: CounterAction): State {
  switch (action.type) {
    case 'reset':
      return initialState;
    case 'setCount':
      return { ...state, count: action.value };
    default:
      throw new Error('Unknown action');
  }
}

export default function ReducerDemo() {
  const [state, dispatch] = useReducer(stateReducer, initialState);

  const addFive = () => dispatch({ type: 'setCount', value: state.count + 5 });
  const reset = () => dispatch({ type: 'reset' });

  return (
    <div>
      <h1>Welcome to my counter</h1>

      <p>Count: {state.count}</p>
      <button onClick={addFive}>Add 5</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

同时，我们也可以使用泛型限定 useReducer 需要的值：


import { stateReducer, State } from './your-reducer-implementation';

const initialState = { count: 0 };

export default function App() {
  const [state, dispatch] = useReducer<State>(stateReducer, initialState);

  // ...
}

useContext

useContext 是函数组件使用 context 中对应的值的一个 hook。 useContext 直接传入 Context 即可。（它会帮你找到最近的一个Context 里面对应传递的值）

const {
  // ...subValue
} = useContext<IContextValue>(Context); // IContextValue 是选填的

useMemo

useMemo 是一个记忆缓存值的 hook。

它会从函数调用中创建/重新访问记忆化值，只有在第二个参数中传入的依赖项发生变化时，才会重新运行该函数。
useMemo 中的函数的类型是根据第一个参数中函数的返回值进行推断的，如果希望明确指定，可以为这个钩子提供一个类型参数以指定函数类型。

import React, {
  FC,
  ReactElement,

  useState,
  useMemo
} from 'react';

const MemoDemo: FC = () => {
	const [count, setCount] = useState(0);

	const doubleCount: number = useMemo(() => count * 2, [count]);
  
  return (
    <div>
    	<h2>COUNT: { count }</h2>
      <h2>DOUBLE_COUNT: { doubleCount }</h2>
      <button onClick={ () => setCount(count => count + 1) }>ADD COUNT</button>
    </div>
  );
}

useCallback

useCallback 是一个可以记忆缓存回调函数的一个性能优化

useCallback 会在第二个参数中传入的依赖项保持不变的情况下，为函数提供相同的引用。

const memoCB = useCallback(() => {
  // do something ...
}, [props.a]);

与 useMemo 类似，useCallback 的回调函数的类型是根据第一个参数中函数的返回值进行推断的，如果希望明确指定，可以为这个钩子提供一个类型参数以指定函数类型。

const memoCB = useCallback<() => void>(() => {
  // do something ...
}, [props.a]);

当在 TypeScript 严格模式下，使用 useCallback 需要为回调函数中的参数添加类型注解。这是因为回调函数的类型是根据函数的返回值进行推断的——如果没有参数，那么类型就不能完全理解。

useRef

useRef 和 createRef 的用法类似，直接传入泛型即可。

const inputRef = useRef<HTMLInputElment | null>();

useEffect

useEffect 用于声明函数组件可能会存在的一些副作用的回调函数。 useEffect 直接使用即可。

useImperativeHandle

useImperativeHandle用于扩展函数组件中的 ref 属性值。（比如在封装 Form 表单时，useImperativeHandle 将非常有用）

import React, {
  forwardRef,
  useImperativeHandle,
  useRef,

  ReactElement,
  ReactNode,
  Ref
} from 'react';

interface IProps {
  children?: ReactNode;
}

interface IApi {
  current: HTMLDivElement | null;
  name: string;
}

const ImperativeHandleDemo = forwardRef((
  props: IProps,
  ref: Ref<IApi>
): ReactElement => {
  const { children } = props;

  const oContainerRef = useRef<HTMLDivElement>(null);

  useImperativeHandle(ref, () => {
    return {
      name: 'ImperativeHandleDemo',
      current: oContainerRef.current
    }
  }, [oContainerRef]);

  return (
    <div ref={ oContainerRef }>
      { children }
    </div>
  );
});

ImperativeHandleDemo.displayName = 'ImperativeHandleDemo';

export default ImperativeHandleDemo;

React Hooks 的常用类型查询

当逐渐适应 React 和 TypeScript 的搭配使用后, 可以尝试阅读 @types/react，此库提供了一整套类型。你可以在 DefinitelyTyped 的 React 目录中找到它们。

转载自:https://juejin.cn/post/7287564299157684258

【深度】React 怎么和 TypeScript 结合使用 ?

前置说明

准备工作：

依赖安装

配置 tsconfig.json

文件后缀

理解：

在类组件结合 TypeScript 使用

基本写法

注意

注意

总结一下

事件定义

ref ：

错误边界：

高阶组件

Context:

在函数组件中结合 TypeScript 使用

组件本身定义：

hooks 定义：

useState

useReducer

useContext

useMemo

useCallback

useRef

useEffect

useImperativeHandle

React Hooks 的常用类型查询

配置 `tsconfig.json`