Vscode niuhe 插件使用教程(3) - 生成 typescript api 定义

100 阅读1分钟

官方教程已经上线, 请访问: niuhe.zuxing.net/

本文以开源项目 vue3-element-admin 项目为例, 说明用 niuhe 插件生成 typescript 结构定义和 api 请求文档的全过程。

项目结构

体验时需要将 admin-core clone 至 admin-core-niuhe 项目的 src 目录下

当前项目 niuhe 文件夹下文件如下, 其中 all.niuhe 引入了所有的 api_xx.niuhe 文件, .config 为 gitignore 掉的配置文件

niuhe
├── .config
├── all.niuhe
├── api_auth.niuhe
├── api_depts.niuhe
├── api_dict.niuhe
├── api_dict_type.niuhe
├── api_files.niuhe
├── api_menus.niuhe
├── api_roles.niuhe
├── api_users.niuhe
├── api_vendor.niuhe
└── comm.niuhe

生成 ts 结构和 api 定义

niuhe 插件默认只生成 golang 代码, 如要生成 ts 时需要在 #langs= 中添加 #langs=ts。 .config 文件内容如下

#langs=ts
#tstypes=/Users/android/Server/vue3-element-admin/src/typings/admin-core.d.ts
#tsapi=/Users/android/Server/vue3-element-admin/src/api/admin/api.ts
  • 第一声明了需要生成 ts 文档,
  • 第二行指定 typing 文件路径,默认路径为 typings/types.d.ts; 自定义后生成内容为 admin-core.d.ts, 点击查看
  • 第三行指定了 api 文件路径, 默认路径为 typings/api.ts;自定义后生成内容为 api.ts, 点击查看

在不修改 types 和 api 时生成代码位于 typings 目录下, 其文件结构为

typings
├── api.ts
├── event.d.ts
├── request.ts
└── types.d.ts

以上简单设置即实现了 niuhe idl 定义生成 typescript 结构和 api 请求和返回数据结构定义。示例代码生成的内容过长, 这里就不贴代码了, 具体请点击本文链接查阅