ts(2339) 通用 useFetchData 挂钩出错答案

【问题标题】：ts(2339) Error with Generic useFetchData hookts(2339) 通用 useFetchData 挂钩出错
【发布时间】：2021-08-16 16:15:03
【问题描述】：

当我想让 useFetchData 钩子变得通用时，我遇到了问题。如果有显式类型，一切都很好，但是在将其转换为泛型函数后，我在一个地方出现错误：“Property 'data' does not exist on type 'unknown'。”

这是我的类型

interface User {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

type Users = User[];

export interface People {
  page: number;
  per_page: number;
  total: number;
  total_pages: number;
  data: Users;
  support: {
    url: string;
    text: string;
  };
}

这是钩子本身

function useFetchData<DataType, ResponseType>(
  url: string
): {
  dataX: DataType | null;
  done: boolean;
} {
  const [dataX, setDataX] = useState<DataType | null>(null);
  const [done, setDone] = useState(false);

  useEffect(() => {
    fetch(url)
      .then((resp) => resp.json())
      .then(({ data }: ResponseType) => { //here is the error
        setDataX(data);
        setDone(true);
      })
      .catch((err) => {
        throw new Error(err);
      });
  }, [url]);

  return {
    dataX,
    done,
  };
}

function CustomHookComponent() {
  const { dataX, done } = useFetchData<Users, People>(
    'https://reqres.in/api/users?page=2'
  );

  return (/*some stuff*/)
}

【问题讨论】：

标签： reactjs typescript typescript-generics

【解决方案1】：

您需要告诉 TypeScript ResponseType 有一个 data 属性，您可以使用 Generic Constraints 进行操作

所以你的函数声明应该是这样的：

function useFetchData<DataType, ResponseType extends {data: DataType}>(
  url: string
): {
  dataX: DataType | null;
  done: boolean;
} {
  // more code here
}

【讨论】：