如何在不使用TypeScript的React Native应用中实现OpenAPI客户端生成器

完全不需要将项目迁移到TypeScript，所有生成产物都是纯JS可直接运行的

前置依赖准备 #

直接使用OpenAPI官方提供的JavaScript目标生成器即可完成实现，步骤如下：

• 首先安装OpenAPI生成工具，推荐用npm版本的@openapitools/openapi-generator-cli，无需额外配置Java环境：

npm install @openapitools/openapi-generator-cli -D

• 准备好你的OpenAPI规范文件（yaml/json格式），放在项目根目录，比如./openapi/spec.json

生成配置与执行 #

• 根目录新建生成配置文件openapi.config.json，填入以下内容，直接指定生成纯JavaScript的axios客户端，适配React Native环境：

{
  "generatorName": "javascript",
  "inputSpec": "./openapi/spec.json",
  "outputDir": "./src/api/client",
  "additionalProperties": {
    "useES6": true,
    "usePromises": true,
    "library": "axios",
    "projectName": "myApiClient"
  }
}

• 在package.json的scripts字段中添加生成命令：

"scripts": {
  "generate-api": "openapi-generator-cli generate -c openapi.config.json"
}

• 执行生成命令，即可在指定的./src/api/client目录得到纯JS的API客户端代码：

npm run generate-api

React Native 适配调整 #

生成的代码默认适配浏览器环境，只需做两处小调整即可在RN中正常运行：

• 打开生成的src/api/client/src/index.js，把默认的axios导入替换为RN兼容的axios版本，未安装axios先执行npm install axios
• 如果生成代码中存在window或者btoa相关的调用，btoa直接用react-native-quick-base64提供的同名方法替代，删除所有window相关的全局变量调用即可

客户端使用示例 #

生成后直接导入即可使用，不需要额外的类型定义：

import { DefaultApi } from './src/api/client'

// 初始化客户端配置
const apiClient = new DefaultApi({
  basePath: 'https://你的API服务域名',
  baseOptions: {
    timeout: 10000
  }
})

// 调用接口示例
const fetchUser = async (userId) => {
  try {
    const res = await apiClient.getUserById(userId)
    console.log('用户数据：', res.data)
  } catch (err) {
    console.error('接口请求报错：', err)
  }
}

轻量方案备选 #

如果觉得openapi-generator配置过于繁琐，也可以使用轻量的swagger-js-codegen工具，专门生成纯JS的API客户端，依赖更少，更适配小型RN项目：

• 安装工具：npm install swagger-js-codegen -D
• 自行编写简易的生成脚本执行即可，生成的代码默认就是纯JS无TS依赖的版本

内容的提问来源于stack exchange，提问作者Himanshu Barmola