TS 项目中高效处理接口返回数据方法详解

const fetchInfo = async (url: string, id: string) => {
  return $http.get(url, params);
}
const res = await fetchInfo('/info', '886');
// 假设 `/info` 接口返回如下数据
{ id: '886', 🙈:{ name: 'Jack', 📱: { brand: 'Chinese Pineapple' } } }

const res:any = await fetchInfo('/info', '886');
console.log(res.🙈.name) // Jack
console.log(res.🙈.age)  // 3

/** 根据接口返回的数据，声明对应的 interface **/
interface Info {
  id: string;
  🙈: Monkey;
}
interface Monkey {
  name: string;
  📱: Phone;
}
interface Phone {
  brand: string;
}
/** 改写 `fetchInfo` 函数返回值类型 **/
const fetchInfo = async (url: string, id: string): Promise<Info> => {
  return $http.get(url, params);
}
const res = await fetchInfo('/info', '886');
console.log(res.🙈.name) // Jack
console.log(res.🙈.age)  // 3

interface Info {
  id: string;
  🙈: Monkey;
}
interface Monkey {
  name: string;
  📱: Phone;
}
interface Phone {
  brand: string;
}