如何在TypeScript中为搭配React Context的自定义Hook定义类型

报错原因 #

报错由两处不匹配导致：

1. 你定义的usersDataContext接口要求Context值必须包含名为usersData的属性，但你的useUsersDataHook返回的状态字段命名为newData，键名不匹配
2. usersDataContext中声明的setUsersData是无参函数类型() => void，但实际实现的setUsersData需要接收一个usersData类型的入参，函数签名不匹配

修复后的完整代码 #

import { createContext, useState, useCallback } from "react";

export type UsersData = {
  data: any;
  isLoading: boolean;
  status: string;
};

export interface UsersDataContext {
  usersData: UsersData;
  // 修正setUsersData的函数签名，匹配实际入参
  setUsersData: (data: UsersData) => void;
}

const UsersContext = createContext<UsersDataContext>({
  usersData: {
    data: [],
    isLoading: false,
    status: "",
  },
  setUsersData: () => {},
});

export const useUsersData = () => {
  const [usersData, setUsersDataState] = useState<UsersData>({
    data: [],
    isLoading: false,
    status: "",
  });

  const setUsersData = useCallback((data: UsersData) => {
    setUsersDataState(data);
  }, []);
  // 返回的字段名和Context接口要求完全对齐
  return {
    usersData,
    setUsersData,
  };
};

export default UsersContext;

修复后你原有的index.tsx传入逻辑不需要改动，类型错误就会消失。

内容的提问来源于stack exchange，提问作者João Pedro