React.js 和 Typescript 返回获取 API 响应的类型?
Posted
技术标签:
【中文标题】React.js 和 Typescript 返回获取 API 响应的类型?【英文标题】:React.js and Typescript return type of a fetch API Response? 【发布时间】:2021-12-25 13:04:48 【问题描述】:是否有可能在运行时检查 fetch API 请求的响应类型?据我所知,Response
总是有吗?如果它与类型不匹配或接受数据,是否可以抛出错误?这是我的代码:
import React, useEffect, useState from 'react';
import logo from './logo.svg';
import './App.css';
type Test =
name: string;
age?: number;
interface TodoData
id: number,
userId: number,
title: string,
completed: boolean,
type JSONResponse = () =>
ok?: boolean,
status: 200 | number,
json: () => Promise<TodoData> | Promise<TodoData>[];
const App: React.FC<Test> = (name, age) =>
const [todos, setTodos] = useState(null);
useEffect(() =>
const fetchData: any = async () =>
let todos: Response = await fetch('https://jsonplaceholder.typicode.com/todos');
console.log(todos);
let todoData: JSONResponse = await todos.json();
console.log(todoData);
fetchData();
,[])
return (
<div className="App">
<p>Hello name your age is age? age: "not given here."</p>
</div>
);
export default App;
【问题讨论】:
你可以使用 axios 代替 fetch。 Axios自带'很简单的方式来输入body、response... 如果你想坚持使用 fetch,可以使用 Joi 为响应定义一个模式。然后,您可以针对响应数据在架构上调用validate()
。
【参考方案1】:
在 Node.js 或您的浏览器可以执行 TypeScript 之前,必须将其编译为 javascript。 Javascript 无法理解 TypeScript 中的类型注解,因此必须在此步骤中将其删除。
因为您的 API 数据仅在运行时可用,而 TypeScript 类型在运行时不可用,所以您无法使用 TypeScript 对响应数据进行类型检查。
但是,您可以教 TypeScript 您希望接收的数据的结构,它会阻止您以非法方式访问数据。
如果您必须在运行时验证响应,JOI 之类的东西是个好主意。 (感谢Robert Hartshorn 的建议)。
【讨论】:
以上是关于React.js 和 Typescript 返回获取 API 响应的类型?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React.js Typescript 版本中使用不支持 typescript 的 javascript 包
React JS Typescript usestate 与布尔值
如何在带有 typescript 项目的 react js 中使用 .env 文件?
React Hooks TypeScript 事件和状态类型