TypeScript中Promise指定string/number返回值却无报错问题咨询

你遇到的无类型报错现象是TypeScript的any类型兼容规则和内置fetchAPI的类型定义共同导致的，具体逻辑如下：

• TypeScript 内置的标准Web API类型定义中，Response接口的json()方法返回值类型为Promise<any>，这是因为运行时无法提前预知接口返回的JSON数据结构，所以TS默认将解析结果标记为任意类型。
• any是TypeScript中的特殊类型，它会关闭类型校验：any类型的值可以赋值给任意类型的变量，也可以作为任意类型的返回值使用，TS不会对any类型的值做类型匹配检查。
• 你代码中最终返回的是data.json()的执行结果，也就是Promise<any>类型，无论你将函数返回值定义为Promise<string>还是Promise<number>，any都可以和这两个类型兼容，因此不会触发类型报错。

如果需要让TS对返回值做类型校验，可以手动指定json()解析结果的类型，示例如下：

// 方式1：返回前做类型断言
const AirQuality = async (): Promise<string> => {
    console.log('Air Quality')
    let data = await fetch(url,{
        method:'GET',
    })
    // 手动指定JSON解析结果的类型
    const result = await data.json() as string
    return result
}

// 方式2：封装泛型请求工具统一处理
const request = <T>(url: string, options?: RequestInit): Promise<T> => {
  return fetch(url, options).then(res => res.json() as Promise<T>)
}

// 调用时指定泛型类型，返回值会自动匹配
const AirQuality = async (): Promise<string> => {
    console.log('Air Quality')
    return request<string>(url, { method: 'GET' })
}

修改后如果你将函数返回类型改为Promise<number>，TS就会正常触发类型不匹配的报错。

内容的提问来源于stack exchange，提问作者TechSelfLearner