如何在箭头函数中返回泛型类型--类型记录

Question

我只是试着让一个定制的钩子做出反应。一切都很好，但是现在我想添加响应的返回类型，因为我已经将钩子函数添加到了类型记录通用箭头函数中。现在，当我试图从钩子中返回这个泛型类型时，我的钩子中有一个错误。

键入“{ name: string；}”不能分配给键入'T‘。可以用与“{ name: string；}”无关的任意类型实例化'T‘。

钩子

type httpRequest = {
  URL: string | undefined;
  Method: 'Get' | 'Post' | 'Put' | 'Delete';
  RequestBody: any;
};

type httpResponse<T> = {
  loading: boolean;
  data: T;
  error: any;
};

const useHttpRequest = <T>(request: httpRequest): httpResponse<T> => {
  console.log();

  return { loading: false, data: { name: 'Sabban' }, error: {} };
};

export default useHttpRequest;

组件

import React from 'react';
import useHttpRequest from '../hooks/use-http';

const Blog = () => {
  const httpRequest = useHttpRequest<{ name: string }>({
    URL: '',
    Method: 'Get',
    RequestBody: {},
  });

  return (
    <div className="container">
      <div className="card">
        <div className="card-body">
          <h5 className="card-title">Card title</h5>
          <h6 className="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p className="card-text">
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Blog;

--我只想返回从组件中得到的确切类型.

Answer 1

这是因为类型系统不能确保在声明阶段内将什么替换为T。

在您的示例中，数据被重新调整为{ name: 'Sabban' }，这是不安全的，因为函数可以像useHttpRequest<{ fullname: string }>一样调用。

似乎您正在构建一个Http客户端，我认为强制强制使用{ name: 'Sabban' } as unknown as T是很好的，因为不可能确保从外部响应中得到什么。

或者，如果您能够列出所有apis和所有响应类型，则可以为每个端点定义一个方法。这就像构建一个SDK客户端。示例：游乐场