如何在箭头函数React TypeScript中返回Generic Type

Question

我只是想在react中创建一个自定义挂钩。一切都很好，但现在我想把我的响应的返回类型添加到typescript通用箭头函数中。现在，当我试图从我的钩子返回这个泛型类型时，我的钩子中出现了一个错误。

类型"｛name:string；｝"不可分配给类型"T"。"T"可以用任意类型实例化，该类型可能与"｛name:string；｝"无关。

挂钩

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是可以的，因为不可能确保从外部响应中得到什么。

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