TypeScript调用fetch时提示'property ip does not exist on type response'如何解决

• fetch返回的Response对象调用json()方法时，默认返回类型是Promise<unknown>，TypeScript无法感知接口返回的JSON结构，自然不知道解析后的对象上存在ip属性，因此触发类型校验报错。
• 原有代码中使用同一个let变量先后存储Response类型对象和JSON解析结果，会导致TS推导变量类型混乱，进一步加剧类型报错。

方案1：类型断言（最简快速方案） #

先定义接口描述返回结构，再对json()的返回结果做类型断言即可：

// 定义ipify接口返回结构
interface IpifyRes {
  ip: string
}

// 分开变量存储Response和解析后的IP数据，避免类型混淆
const ipResponse = await fetch('https://api.ipify.org?format=json')
// 类型断言告知TS返回结构符合IpifyRes定义
const userIp = await ipResponse.json() as IpifyRes
const data = await fetch(
  `https://geo.ipify.org/api/v1?apiKey=API_KEY&ipAddress=${userIp.ip}`
)

方案2：类型守卫（更安全，适合生产环境） #

如果需要严格校验返回结构避免运行时错误，可以加类型守卫做判断：

interface IpifyRes {
  ip: string
}

// 类型守卫函数，校验返回值是否符合IpifyRes结构
function isIpifyRes(val: unknown): val is IpifyRes {
  return typeof val === 'object' && val !== null && 'ip' in val && typeof (val as IpifyRes).ip === 'string'
}

const ipResponse = await fetch('https://api.ipify.org?format=json')
const rawIp = await ipResponse.json()

if (!isIpifyRes(rawIp)) {
  throw new Error('IP接口返回结构异常')
}

// 此处TS会自动识别rawIp为IpifyRes类型，可直接访问ip属性
const data = await fetch(
  `https://geo.ipify.org/api/v1?apiKey=API_KEY&ipAddress=${rawIp.ip}`
)

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