今天深入探索一個(gè)神奇的工具——openapi-typescript-codegen。它不僅能夠幫助你快速生成TS代碼，還能讓你的API請(qǐng)求更加高效、類型安全，讓開(kāi)發(fā)者擺脫手動(dòng)編寫(xiě)冗長(zhǎng)請(qǐng)求代碼的困擾，專注于實(shí)現(xiàn)業(yè)務(wù)邏輯。接下來(lái)讓我們一起來(lái)了解它的強(qiáng)大功能和使用技巧，提升你的開(kāi)發(fā)體驗(yàn)！

        openapi-typescript-codegen：根據(jù)OpenAPI規(guī)范自動(dòng)生成TS代碼的開(kāi)源工具，OpenAPI 是一種廣泛使用的API規(guī)范，能夠描述RESTful API的結(jié)構(gòu)和行為，包括請(qǐng)求、響應(yīng)、數(shù)據(jù)模型等內(nèi)容，而openapi-typescript-codegen這個(gè)工具正是利用OpenAPI規(guī)范，自動(dòng)化地為開(kāi)發(fā)者生成與之匹配的TS類型定義和API客戶端代碼，也就是說(shuō)作為前端的你不再需要根據(jù)后端提供的接口編寫(xiě)接口函數(shù)，直接一鍵就可以生成接口函數(shù)，大大提高了編程效率！

如果想了解該開(kāi)源工具的源碼，可以隨時(shí)訪問(wèn) 官網(wǎng) 進(jìn)行查閱，這里不再贅述，接下來(lái)博主就對(duì)這個(gè)開(kāi)源工具進(jìn)行一個(gè)簡(jiǎn)單的介紹！

openapi-typescript-codegen的作用如下所示：

1）自動(dòng)生成TS類型：通過(guò)讀取OpenAPI規(guī)范文件，生成與之對(duì)應(yīng)的TS類型定義，這樣直接在代碼中使用這些類型，而無(wú)需手動(dòng)編寫(xiě)類型聲明確保類型安全。

2）生成API客戶端代碼：生成用于與API交互的客戶端代碼，包括自動(dòng)生成請(qǐng)求函數(shù)、錯(cuò)誤處理、請(qǐng)求參數(shù)的類型化等。

3）簡(jiǎn)化與API的集成：幫助快速生成與API交互所需的所有代碼，避免了手動(dòng)構(gòu)建請(qǐng)求、解析響應(yīng)等繁瑣的工作，提高了開(kāi)發(fā)效率。

4）保持同步與API規(guī)范：通過(guò)直接從OpenAPI規(guī)范中生成代碼，確保每次 API 更新時(shí)相關(guān)的客戶端代碼都能自動(dòng)同步，避免了手動(dòng)更新的繁瑣和遺漏。

通過(guò)官方文檔的介紹，我們可以知道我們使用該開(kāi)源工具的優(yōu)勢(shì)所在：

總之其是一個(gè)非常有意義的工具，特別適用于需要與第三方或內(nèi)部API進(jìn)行頻繁交互的TS項(xiàng)目，幫助開(kāi)發(fā)者減少了手動(dòng)編寫(xiě)重復(fù)代碼的工作量，確保了代碼的類型安全和可靠性，同時(shí)能夠與API文檔保持同步，減少了開(kāi)發(fā)中的錯(cuò)誤和不一致問(wèn)題，具體想了解的請(qǐng)查閱官網(wǎng)，這里不再贅述：

借助該工具開(kāi)發(fā)者不僅能提高開(kāi)發(fā)效率，還能享受更加流暢和高效的工作體驗(yàn)，接下來(lái)博主就講解一下如何對(duì)該開(kāi)源工具使用進(jìn)行講解，不足之處還請(qǐng)見(jiàn)諒！

接下來(lái)介紹如何快速上手openapi-typescript-codegen，幫助開(kāi)發(fā)者如何在項(xiàng)目中輕松生成與API交互所需的代碼，提升開(kāi)發(fā)效率并確保類型安全，在官方文檔中提供了該工具使用的一些核心命令，如下所示：

$ openapi --help
  Usage: openapi [options]
  Options:
    -V, --version             output the version number
    -i, --input <value>       OpenAPI specification, can be a path, url or string content (required)
    -o, --output <value>      Output directory (required)
    -c, --client <value>      HTTP client to generate [fetch, xhr, node, axios, angular] (default: "fetch")
    --name <value>            Custom client class name
    --useOptions              Use options instead of arguments
    --useUnionTypes           Use union types instead of enums
    --exportCore <value>      Write core files to disk (default: true)
    --exportServices <value>  Write services to disk (default: true)
    --exportModels <value>    Write models to disk (default: true)
    --exportSchemas <value>   Write schemas to disk (default: false)
    --indent <value>          Indentation options [4, 2, tab] (default: "4")
    --postfixServices         Service name postfix (default: "Service")
    --postfixModels           Model name postfix
    --request <value>         Path to custom request file
    -h, --help                display help for command
  Examples
    $ openapi --input ./spec.json --output ./generated
    $ openapi --input ./spec.json --output ./generated --client xhr

從上面核心命令舉出的examples我們可以知道，該工具主要使用的就是這兩個(gè)常用命令，這里對(duì)其做一個(gè)簡(jiǎn)單的介紹：

例如：openapi --input ./spec.json --output ./generated --client xhr

1）–input：指定接口文檔的路徑、url 或字符串內(nèi)容（必填）

2）–output：代碼生成的目錄

3）–client：生成的代碼所需要使用的請(qǐng)求庫(kù) 

作為前端開(kāi)發(fā)者最常用的請(qǐng)求庫(kù)無(wú)非就是axios，這里我們終端執(zhí)行如下命令進(jìn)行安裝：

// 首先下載axios
npm install axios
// 然后安裝成功API工具
npm install openapi-typescript-codegen --save-dev

生成命令：裝配置之后我們可以直接在我們的demo項(xiàng)目中進(jìn)行測(cè)試一下，項(xiàng)目終端執(zhí)行如下命令可是發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò)無(wú)法識(shí)別，如下所示：

openapi --input 你的在線swagger.json地址 --output ./src/api --client axios

解決該方法有兩種，一直是直接將開(kāi)源工具全局安裝，另一種就是使用npx臨時(shí)安裝，都可以：

// 全局安裝
npm install openapi-typescript-codegen -g
// 臨時(shí)安裝
npx openapi-typescript-codegen --input 你的在線swagger.json地址 --output ./src/api--client axios

如下可以看出我們根據(jù)在線的swagger.json直接生成的API接口代碼：

為了方便后期重新生成最新的接口代碼，我們可以將命令放置在package.json文件中，通過(guò)執(zhí)行npm命令快速生成接口代碼，如下所示：

目錄介紹：接下來(lái)我們對(duì)上面生成的api目錄下的文件代碼進(jìn)行一個(gè)簡(jiǎn)單的介紹：

1）core：包含接口請(qǐng)求類型限制、接口請(qǐng)求基本設(shè)置、封裝的接口請(qǐng)求request函數(shù)

2）models：包含接口請(qǐng)求函數(shù)中的所有ts類型

3）services：包含所有的請(qǐng)求接口函數(shù)

4）index.ts：所有請(qǐng)求函數(shù)的出口

這里我們可以自定義一個(gè)request.ts文件，然后執(zhí)行如下命令，在每次重新生成的api文件中，復(fù)制使用我們自定義的request.ts文件：

// axios基礎(chǔ)封裝
import axios from 'axios'
export const request: any = axios.create({
    baseURL: '服務(wù)器接口根地址',
    timeout: 5000,
})
// 請(qǐng)求攔截器
request.interceptors.request.use((config: any) => {
    // 請(qǐng)求攔截器
    return config
}, (error: any) => {
    return Promise.reject(error)
})
// 響應(yīng)攔截器
request.interceptors.response.use((res: any) => {
    return res.data
},  (error: any) => {
        //處理網(wǎng)絡(luò)錯(cuò)誤
        let msg = ''
        const status = error.response.status
        switch (status) {
            case 401:
                msg = 'token過(guò)期'
                break
            case 403:
                msg = '無(wú)權(quán)訪問(wèn)'
                break
            case 404:
                msg = '請(qǐng)求地址錯(cuò)誤'
                break
            case 500:
                msg = '服務(wù)器出現(xiàn)問(wèn)題'
                break
            default:
                msg = '網(wǎng)絡(luò)出現(xiàn)問(wèn)題'
                break
        }
        return Promise.reject(error)
    }
)

要生成的代碼中執(zhí)行如下命令，該--request參數(shù)告訴生成器不要生成默認(rèn)的request.ts文件，而是復(fù)制指定的自定義文件進(jìn)行使用：

openapi --input swagger地址 --output ./src/api --request ./src/utils/request.ts --client axios

隨便調(diào)用一個(gè)函數(shù)：

import { Button } from 'antd';
import { BasicDataService } from './api'
const App = () => {
  const getData = async () => {
    const data = await BasicDataService.basicDataQueryLocation()
    console.log(data)
  }
  getData()
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <Button type='primary'>按鈕</Button>
    </div>
  )
}
export default App

結(jié)果被打印了出來(lái)：

到此這篇關(guān)于React掌握openapi-typescript-codegen快速生成API客戶端代碼的文章就介紹到這了,更多相關(guān)react openapi-typescript-codegen API內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論