TypeScript fetch 类型怎么用
在日常开发中，很多前端同学都用过 fetch 来调用接口——比如写个获取天气的小工具，代码大概是这样：
`javascript
// 普通JS写fetch
fetch('/api/weather?city=beijing')
.then(res => res.json())
.then(data => console.log('北京天气：', data.temperature))
`
但这段代码藏着不少坑：万一接口返回的 temperature 字段突然变成了字符串，或者接口写错了字段名，运行时才会报错，调试起来特别费时间。换成 TypeScript 来用 fetch，就能提前避开这些问题，还能借助编辑器的自动补少写代码。
先搞懂TypeScript给fetch加类型的核心
TypeScript 给 fetch 加类型，核心是给「接口返回的数据」定规则——就像你点奶茶时，会明确说“要全糖少冰的珍珠奶茶，不要加椰果”，TypeScript 会严格照着你定的“规则”检查数据，不符合就直接报错。
举个生活化的例子：你和外卖员约定“送的外卖必须有1份米饭、1份宫保鸡丁、1杯冰可乐，少一样都不收”，这约定就相当于 TypeScript 的类型规则；如果外卖员漏送了可乐，你不用打开外卖就知道不符合要求，TypeScript 就是帮你在代码“签收”数据前就发现问题。
第一步：先给接口返回的数据写类型
写类型最简单的方式是用 type 定义一个“数据模板”，把接口该有的字段、类型都列清楚。比如刚才的天气接口，我们可以这么写：
`typescript
// 定义天气数据的类型模板
type WeatherData = {
temperature: number; // 温度是数字
condition: 'sunny' | 'cloudy' | 'rainy'; // 天气是固定三种值之一
updateTime: string; // 数据更新时间是字符串
}
`
这个模板就像天气接口的“说明书”，明确告诉 TypeScript：调用接口后，返回的数据必须有这三个字段，而且每个字段的类型都得符合要求，缺一个或者类型错了，TypeScript 都会直接标红报错，不用等运行。
第二步：把类型和fetch结合起来
fetch 本身返回的是 Promise<Response>，要拿到类型化的数据，得用 res.json() 时指定我们写好的类型，就像把外卖送到后，先对照“说明书”核对一遍再签收。完整代码如下：
`typescript
async function getWeather(city: string): Promise<WeatherData> {
// 调用fetch，返回的是原始响应，类型是Response
const res = await fetch(/api/weather?city=${city});
// 把响应转成我们定义的WeatherData类型，TypeScript会自动检查
return res.json() as WeatherData;
}
// 使用时直接用类型
async function showBeijingWeather() {
const beijingWeather = await getWeather('beijing');
// 编辑器会自动补全字段，还会检查类型：比如beijingWeather.temperature会提示是数字
console.log('北京温度：', beijingWeather.temperature);
// 要是不小心写了beijingWeather.temp（接口没这个字段），编辑器直接标红
}
`
这里的 as WeatherData 就是告诉 TypeScript：“我确定这个数据符合 WeatherData 的规则，你照着我定的规则检查就行”——就像你对外卖员说“我看过了，符合约定，签收吧”。
进阶小技巧：处理接口可能返回的错误
实际开发中，接口可能失败，比如没网、城市名写错，这时候可以给返回的类型加可选字段，或者单独定义错误类型。比如调整一下：
`typescript
type WeatherResponse = {
success: boolean;
data?: WeatherData; // 成功时才有数据，失败时没有
errorMsg?: string; // 失败时才有错误信息
}
async function getWeather(city: string) {
const res = await fetch(/api/weather?city=${city});
const result = await res.json() as WeatherResponse;
if (result.success) {
console.log('天气正常：', result.data?.temperature);
} else {
console.log('出错了：', result.errorMsg);
}
}
`
这个小技巧就像给外卖加了“异常预案”：要是外卖漏了，会有专门的退款说明，而不是直接报错。
用 TypeScript 给 fetch 加类型，本质就是给接口数据定“明确的规则”，提前堵住代码里的隐性错误，还能靠编辑器的自动补少敲很多重复代码，对新手和老手都友好。