用swagger-typescript-api根據(jù)Swagger定義自動(dòng)生成前端TypeScript類型定義以及API請(qǐng)求代碼

介紹

隨著前端技術(shù)的不斷進(jìn)步嫂粟,typescript已經(jīng)在前端開發(fā)中也越來越普及勾给。

在前端開發(fā)與后端項(xiàng)目聯(lián)調(diào)的過程中,我們總避免不了要根據(jù)后端的接口文檔(一般是Swagger)來定義前端的API調(diào)用代碼诬烹,同時(shí)要根據(jù)接口文檔中API請(qǐng)求參數(shù)憎妙,返回參數(shù)等定義出前端使用的typescript類型定義,隨著業(yè)務(wù)功能的增大口锭,這項(xiàng)工作也越來越耗費(fèi)前端開發(fā)人員的時(shí)間朦前,然后而這項(xiàng)工作本來是可以通過自動(dòng)化工具去完成的,因?yàn)楹蠖送瑢W(xué)給出的接口文檔中就已經(jīng)包含了請(qǐng)求類型鹃操,方法名稱韭寸,參數(shù)類型,返回值類型等定義荆隘,只需要通過工具依據(jù)固定的規(guī)則轉(zhuǎn)化為前端代碼即可恩伺。

swagger-typescript-api 這個(gè)開源工具包就是幫助我們完成這件事情的,利用它我們可以很方便地生成前端的typescript類型定義以及API調(diào)用代碼椰拒。而且它同時(shí)支持JSON, yaml兩種格式晶渠。

文檔 https://github.com/acacode/swagger-typescript-api

例子 https://github.com/acacode/swagger-typescript-api/tree/master/tests

使用方式

swagger-typescript-api 可以通過命令行的方式直接使用, 也可以在nodejs中引入調(diào)用燃观。

命令行的使用方式

npx swagger-typescript-api -p ./swagger.json -o ./src -n myApi.ts

nodejs中使用

const { generateApi } = require('swagger-typescript-api');
const path = require('path');
const outputDir = path.resolve(process.cwd(), './src/__generated__');

/* NOTE: all fields are optional expect one of `output`, `url`, `spec` */
generateApi({
  // input: path.resolve(__dirname, "./schemas.json"),
  url: 'http://api.com/swagger.json',
  output: outputDir,
  modular: true,
  templates: path.resolve(__dirname, './templates'),
  axios: true,
  routeTypes: true,
});

在上面代碼中可以看到input 和 url兩個(gè)配置項(xiàng)褒脯,這代表兩種swagger內(nèi)容獲取方式,二者選其一即可缆毁。個(gè)人推薦url的方式番川,后端swagger定義更新后,我們直接重新運(yùn)行生成命令即可脊框,不用替換swagger內(nèi)容颁督,更加方便一些。modular選項(xiàng)不加的話缚陷,默認(rèn)將所有api接口放在一個(gè)API文件里适篙,可讀性略差往核,加上modular屬性并設(shè)置為true, 可以更具swagger中定義的API模塊箫爷,分別生成單獨(dú)的API類文件,這樣可讀性較高一些聂儒。

定制模版

想要自定義生成的API代碼的話虎锚,可以通過定制模版來實(shí)現(xiàn)。

首先我們可以將 swagger-typescript-api 這個(gè)包下面templates目錄下的默認(rèn)模版給復(fù)制過來衩婚,然后根據(jù)自己的需要進(jìn)行修改窜护。

/templates/default 是單API文件模式的模版

/templates/modular 是多個(gè)API文件模式的模版(需要將配置項(xiàng)modular設(shè)置為true)

/templates/base 是單API模式和多API模式共用的基礎(chǔ)模版

根據(jù)自己的需要,只拷貝需要的目錄和文件即可非春,模版使用了ETA語法柱徙,語法參考 https://eta.js.org/docs/syntax

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末缓屠,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子护侮,更是在濱河造成了極大的恐慌敌完,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件羊初,死亡現(xiàn)場(chǎng)離奇詭異滨溉,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)长赞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門晦攒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人得哆,你說我怎么就攤上這事脯颜。” “怎么了柳恐?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵伐脖,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我乐设,道長(zhǎng)讼庇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任近尚,我火速辦了婚禮蠕啄,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘戈锻。我一直安慰自己歼跟,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布格遭。 她就那樣靜靜地躺著哈街,像睡著了一般。 火紅的嫁衣襯著肌膚如雪拒迅。 梳的紋絲不亂的頭發(fā)上骚秦,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音璧微,去河邊找鬼作箍。 笑死,一個(gè)胖子當(dāng)著我的面吹牛前硫,可吹牛的內(nèi)容都是我干的胞得。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼屹电,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼阶剑!你這毒婦竟也來了跃巡?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤牧愁,失蹤者是張志新(化名)和其女友劉穎瓷炮,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體递宅,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡娘香,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了办龄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片烘绽。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖俐填,靈堂內(nèi)的尸體忽然破棺而出安接,到底是詐尸還是另有隱情,我是刑警寧澤英融,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布盏檐,位于F島的核電站,受9級(jí)特大地震影響驶悟,放射性物質(zhì)發(fā)生泄漏胡野。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一痕鳍、第九天 我趴在偏房一處隱蔽的房頂上張望硫豆。 院中可真熱鬧,春花似錦笼呆、人聲如沸熊响。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽汗茄。三九已至,卻和暖如春铭若,著一層夾襖步出監(jiān)牢的瞬間洪碳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工奥喻, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留偶宫,地道東北人非迹。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓环鲤,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親憎兽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子冷离,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容