React TypeScript - 如何在 Hooks 上设置类型（+ 备忘单）

TypeScript 是一种很棒的语言，它允许对代码进行类型检查，以使其更加健壮和易于理解。

在本指南中，我将指导您在 React hooks（useState、useContext、useCallback 等）上设置 TypeScript 类型。

在 useState 上设置类型
在 useRef 上设置类型
在 useContext 上设置类型
在 useReducer 上设置类型
在 useMemo 上设置类型
在 useCallback 上设置类型

让我们深入了解

在 useState 上设置类型

这个useState钩子允许你管理 React 应用中的状态。它相当于this.stateClass 组件的状态。

import * as React from "react";

export const App: React.FC = () => {
 const [counter, setCounter] = React.useState<number>(0)

 return (
    <div className="App">
      <h1>Result: { counter }</h1>
      <button onClick={() => setCounter(counter + 1)}>+</button>
      <button onClick={() => setCounter(counter - 1)}>-</button>
    </div>
  );
}

要在钩子上设置类型useState，你需要传入<>状态的类型。<number | null>如果没有初始状态，也可以像这样使用联合类型。

在 useRef 上设置类型

该useRef钩子返回一个允许访问 DOM 元素的可变 ref 对象。

import * as React from "react";

export const App: React.FC = () => {
  const myRef = React.useRef<HTMLElement | null>(null)

  return (
    <main className="App" ref={myRef}>
      <h1>My title</h1>
    </main>
  );
}

如您所见，useRef接收类型的方式与钩子相同useState。您只需将其传递给<>- 即可。如果您有多个类型注释，只需像我这里一样使用联合类型即可。

在 useContext 上设置类型

useContext是一个允许访问和使用 React 应用程序中给定上下文的钩子。

import * as React from "react";

interface IArticle {
  id: number
  title: string
}

const ArticleContext = React.createContext<IArticle[] | []>([]);

const ArticleProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [articles, setArticles] = React.useState<IArticle[] | []>([
    { id: 1, title: "post 1" },
    { id: 2, title: "post 2" }
  ]);

  return (
    <ArticleContext.Provider value={{ articles }}>
      {children}
    </ArticleContext.Provider>
  );
}

const ShowArticles: React.FC = () => {
  const { articles } = React.useContext<IArticle[]>(ArticleContext);

  return (
    <div>
      {articles.map((article: IArticle) => (
        <p key={article.id}>{article.title}</p>
      ))}
    </div>
  );
};

export const App: React.FC = () => {
  return (
    <ArticleProvider>
      <h1>My title</h1>
      <ShowArticles />
    </ArticleProvider>
  );
}

这里，我们首先创建一个IArticle与上下文类型对应的接口。
接下来，我们在createContext()方法中使用它来创建一个新的上下文，并用它初始化它[]——如果你愿意，也可以将其用作null初始状态。

有了这些，我们现在可以处理上下文的状态并设置类型，useContext以便将类型数组IArticle作为值。

在 useReducer 上设置类型

钩子useReducer有助于管理更复杂的状态。它是的替代方案，useState但请记住它们是不同的。

import * as React from "react";

enum ActionType {
  INCREMENT_COUNTER = "INCREMENT_COUNTER",
  DECREMENT_COUNTER = "DECREMENT_COUNTER"
}

interface IReducer {
  type: ActionType;
  count: number;
}

interface ICounter {
  result: number;
}

const initialState: ICounter = {
  result: 0
};

const countValue: number = 1;

const reducer: React.Reducer<ICounter, IReducer> = (state, action) => {
  switch (action.type) {
    case ActionType.INCREMENT_COUNTER:
      return { result: state.result + action.count };
    case ActionType.DECREMENT_COUNTER:
      return { result: state.result - action.count };
    default:
      return state;
  }
};

export default function App() {
  const [state, dispatch] = React.useReducer<React.Reducer<ICounter, IReducer>>(
    reducer,
    initialState
  );

  return (
    <div className="App">
      <h1>Result: {state.result}</h1>
      <button
        onClick={() =>
          dispatch({ type: ActionType.INCREMENT_COUNTER, count: countValue })
        }> +
      </button>
      <button
        onClick={() =>
          dispatch({ type: ActionType.DECREMENT_COUNTER, count: countValue })
        }> -
      </button>
    </div>
  );
}

这里，我们首先声明允许处理计数器的动作类型。接下来，我们分别为 Reducer 函数和计数器状态设置两种类型。

Reducer 需要一个state类型的ICounter和一个action类型的IReducer。这样，计数器就可以被正确处理了。

该useReducer钩子接收 reducer 函数和初始状态作为参数，并返回两个元素：state计数器和dispatch动作。

要设置返回值的类型ueReducer- 只需传递<>数据类型即可。

完成上述操作后，现在可以通过增加或减少计数器useReducer。

在 useMemo 上设置类型

这个useMemo钩子允许你记住给定函数的输出。它返回一个记忆值。

const memoizedValue = React.useMemo<string>(() => {
  computeExpensiveValue(a, b)
}, [a, b])

要设置类型，只需将要记忆的数据类型useMemo传入即可。此处，钩子期望返回一个值。<>
string

在 useCallback 上设置类型

该useCallback钩子允许你记忆一个函数，以防止不必要的重新渲染。它返回一个记忆化的回调函数。

type CallbackType = (...args: string[]) => void

const memoizedCallback = React.useCallback<CallbackType>(() => {
    doSomething(a, b);
  }, [a, b]);

在这里，我们声明了CallbackType要记忆的回调函数所使用的类型。
它期望接收类型的参数string，并返回类型的值void。

接下来，我们设置该类型useCallback- 如果您将错误的类型传递给回调或依赖项数组 - TypeScript 将会向您大喊。

您可以在我的博客上找到其他类似的精彩内容，或者在 Twitter 上关注我以获取通知。

感谢阅读

文章来源：https://dev.to/ibrahima92/react-typescript-how-to-set-types-on-hooks-cheat-sheet-gll