寫在前面

在 TypeScript 項(xiàng)目中，TypeScript 對接口返回?cái)?shù)據(jù)的處理，是日常項(xiàng)目開發(fā)中一個(gè)比較棘手的問題。

那我們該如何 高效 的解決這個(gè)問題呢？

問題

項(xiàng)目中使用 ts 都會(huì)碰到如下場景：從接口請求過來的數(shù)據(jù)該如何進(jìn)行處理？

const fetchInfo = async (url: string, id: string) => {
  return $http.get(url, params);
}
const res = await fetchInfo('/info', '886');
// 假設(shè) `/info` 接口返回如下數(shù)據(jù)
{ id: '886', ??:{ name: 'Jack', ??: { brand: 'Chinese Pineapple' } } }

那我們該如何得到 ?? 的名字以及使用的 ?? 品牌呢？

解答

目前比較常用的寫法有以下兩種

any 大法：

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

更加優(yōu)雅的 interface 寫法：

/** 根據(jù)接口返回的數(shù)據(jù)，聲明對應(yīng)的 interface **/
interface Info {
  id: string;
  ??: Monkey;
}
interface Monkey {
  name: string;
  ??: Phone;
}
interface Phone {
  brand: string;
}
/** 改寫 `fetchInfo` 函數(shù)返回值類型 **/
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

區(qū)別

兩種實(shí)現(xiàn)方式的區(qū)別十分明顯：

any 大法

• ? 前期開發(fā)代碼量少，快速簡單。
• ?? 由于未定義 interface 導(dǎo)致整個(gè)項(xiàng)目充斥著大量 any 類型，項(xiàng)目淪為 AnyScript。
• ?? 無法獲得健全的 ts 語法檢測功能，弱化了使用 ts 的作用。
• ?? 后期維護(hù)成本高，后端修改字段，ts 語法無法檢測。

interface

• ?? 前期開發(fā)代碼量大，需要為每個(gè)接口定義 interface。
• ? 獲得豐富的代碼提示以及語法檢測能力。
• ? 后期項(xiàng)目易維護(hù)，接口字段改動(dòng)，只需要同步更新 interface 數(shù)據(jù)即可實(shí)現(xiàn)類型檢測。

總結(jié)

通過上面的總結(jié)不難看出，interface 方式優(yōu)勢眾多，但同時(shí)也有著一個(gè)致命的弊端：

我們在前期的開發(fā)過程中需要對所有接口返回的不同數(shù)據(jù)類型定義對應(yīng)的 interface。

例如上面示例的 /info 接口我們就需要定義三個(gè) interface ，實(shí)際項(xiàng)目中，字段數(shù)量可能達(dá)到幾十上百個(gè)！

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

這對于我們前期開發(fā)效率來說無疑是 毀滅性 的??????

?? 必備高效神器

基于上面 interface 方式所面臨的問題

給大家安利一款前端在線代碼生成工具：JsonToAny （ Gitee / GitHub ）

能夠很輕松的將我們接口返回的 JSON 數(shù)據(jù)轉(zhuǎn)換成我們前端所需要的 interface

最大限度的節(jié)省了我們手動(dòng)定義 interface 的時(shí)間

p>至此，我們完美解決的了 interface 方式最大的弊端，一勞永逸??。

以上就是TS 項(xiàng)目中如何高效的處理接口返回的數(shù)據(jù)的詳細(xì)內(nèi)容，更多關(guān)于TS 項(xiàng)目處理接口返回?cái)?shù)據(jù)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論