React.js和Typescript返回fetch API响应的类型？
React.js和Typescript返回fetch API响应的类型？
提问于 2021-11-13 15:06:21
有没有可能在运行时检查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;回答 1
Stack Overflow用户
发布于 2021-11-14 21:54:37
在Node.js或您的浏览器可以执行TypeScript之前，必须将其编译为JavaScript。Javascript不理解来自TypeScript的类型注释，因此在这一步中必须删除它们。
由于您的API数据仅在运行时可用，而TypeScript类型在运行时不可用，因此您不能使用TypeScript检查响应数据。
然而，你可以教TypeScript你期望接收的数据是如何构造的，这将防止你以非法的方式访问数据。
如果您必须在运行时验证响应，那么像JOI这样的代码是个好主意。(感谢Robert Hartshorn的建议)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69955506
复制相关文章
相似问题
腾讯云开发者
