关于泛型检查

Question

拦截器每一个元素的reslove方法如下：

interface PromiseChain<T> {
  resolved: ResolvedFn<T> | ((config: AxiosRequestConfig) => AxiosPromise)
  rejected?: RejectedFn
}

export interface ResolvedFn<T> {
  (val: T): T | Promise<T>
}

这里的 ResolvedFn 指定了接受和返回的类型必须相同，但实际使用中：

axios.interceptors.response.use(res => {
  res.data += '3'
  return res.data
})

我返回的是T类型的data类型，我以为ts会报错，但并没有，想问问老师原因是什么？
平时使用中响应拦截器有时候会传入和返回的类型不一致，这里设计成传入和返回的类型一致是不是有点不太合理呢？

Answer 1

提问者 许愿瓶啊 2020-08-20 17:48:48

这里传入的是T类型 AxiosResponse

resolved函数类型是 ResolvedFn<T> 所以这里返回也应该是 AxiosResponse 类型吧？

• ustbhuangyi #1

  T 是 AxiosResponse，所以 resolved 函数类型是 ResolvedFn<T> 就是 
  ResolvedFn<AxiosResponse>，它的返回值类型是 Promise<AxiosResponse> 或者 AxiosResponse
  
  而 res.data 的类型就是 T 也就是是 AxiosResponse，所以你可以在代码中 return res.data。

• 提问者 许愿瓶啊 回复 ustbhuangyi #2

  我有点明白了，不过跟老师的想法不太一样。 res.data 的 T 在实例化的过程中并没有传，默认是 any 类型，这就是 eslint 没有报错的原因，证据如下：
    this.interceptors = {
        request: new InterceptorManager<AxiosRequestConfig>(),
        response: new InterceptorManager<AxiosResponse>()
      }
  所以这里 res 是 AxiosResponse<any> 类型，返回的 res.data 即 any 类型，所以 eslint 没有报错，最后谢谢老师!

• ustbhuangyi 回复 提问者 许愿瓶啊 #3

  嗯，默认是 any，没传确实是 AxiosResponse<any>

Answer 2

ustbhuangyi 2020-08-20 12:46:17

res.data 的类型就是泛型 T




函数的返回值是可以是 T 或者 Promise<T>

类型满足，当然不会报错了。

• 提问者 许愿瓶啊 #1

  老师回复里不能上传图片，我提交了个新回复，我认为这里的T应该是 
   AxiosResponse 类型，因为 InterceptorManager 的 response 类型在实例化的时候传入的就是 AxiosResponse，不知道这样理解有没有错误。如果是正确的话 ts 不报错就不知道啥原因了..