寫(xiě)在前面

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

那我們?cè)撊绾?高效 的解決這個(gè)問(wèn)題呢？

問(wèn)題

項(xiàng)目中使用 ts 都會(huì)碰到如下場(chǎng)景：從接口請(qǐng)求過(guò)來(lái)的數(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' } } }

那我們?cè)撊绾蔚玫??? 的名字以及使用的 ?? 品牌呢？

解答

目前比較常用的寫(xiě)法有以下兩種

any 大法：

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

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

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

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

interface

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

總結(jié)

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

我們?cè)谇捌诘拈_(kāi)發(fā)過(guò)程中需要對(duì)所有接口返回的不同數(shù)據(jù)類(lèi)型定義對(duì)應(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;
}

這對(duì)于我們前期開(kāi)發(fā)效率來(lái)說(shuō)無(wú)疑是 毀滅性 的??????

?? 必備高效神器

基于上面 interface 方式所面臨的問(wèn)題

給大家安利一款前端在線代碼生成工具：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ù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論