React.js和获取API响应的Typescript返回类型

Question

是否可以在运行时检查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;

Answer 1

在Node.js或浏览器执行TypeScript之前，必须将其编译为JavaScript。Javascript不会从TypeScript中取消对类型注释的绑定，因此必须在这一步中删除它们。

由于API数据仅在运行时可用，而TypeScript类型在运行时不可用，因此无法使用TypeScript对响应数据进行类型检查。

然而，你可以教TypeScript你期望接收的数据是如何结构化的，它可以防止你以非法的方式访问数据。

如果必须在运行时验证响应，那么像JOI这样的方法是个好主意。(感谢Robert Hartshorn的建议(。