Use auto-service, deny any

This article was first published at: https://github.com/bigo-frontend/blog/ Welcome to follow and repost.

Use auto-service, deny any

background

bigo brpc service management platform is the author's first project developed based on react pure ts. In the early stage, due to the fast iteration, there were a lot of data of any type in the project, mainly api request and response data. There are too many any, on the one hand, it is not standardized, on the other hand, it bypasses the verification, and the advantages of ts will no longer exist.

Based on the above problems, the solution is as follows:

Use auto-service, combined with the open source mock platform yapi, to automatically generate models.

Introduction to auto-service

auto-service can automatically generate API call code in TypeScript format and type definition of interface request/response according to interface document (JSON) in Swagger or YApi format. auto-service relies on the Java generation tool custom-developed based on the open source project Swagger Codegen , please ensure that Java has been installed.

The usage described in this article is used in combination with yapi.

auto-service use

Install

npm i -D auto-service

configuration file

Create a new configuration file json2service.json, the token is obtained under the settings tab under the yapi project

{
    
    
    "url": "yapi.json",
    "remoteUrl": "https://yapi.domain.com/api/open/plugin/export-full?type=json&pid=4232&status=all&token=xxxx",
    "type": "yapi"
}

Add build command

Add command in package.json:

"auto2ts": "autos -c json2service.json --clear"

-c filename means to use the configuration file;
–clear means to clear the old product before generating the new product;
–models means to only produce the interface.

For other specific configurations, please refer to the documentation .

run

npm run auto2ts

Effect

Sample API:

Generate result:

The models of the api request parameters are in the api folder, and the models of the data returned by the api are in the model folder.

// 请求参数model
// DefaultApi.ts

import ajax, {
    
     AjaxPromise, ExtraFetchParams } from "@ajax";
import * as models from "../model/models";

/**
 * @description apiV1AppSvrGet参数
 * @property `appName` 应用名
 * @property `[svrName]` 服务名
 */
export interface ParamsapiV1AppSvrGet {
    
    
  // queryParams
  /**
   * 应用名
   */
  appName: string;
  /**
   * 服务名
   */
  svrName?: string;
}

export class DefaultApi {
    
    
  /**
   * 
   * @summary 获取应用所有服务
   * @param params ParamsapiV1AppSvrGet
   * @returns models.ApiV1AppSvr
   */
  public apiV1AppSvrGet = (
    params: ParamsapiV1AppSvrGet,
    opt?: ExtraFetchParams
  ): AjaxPromise<models.ApiV1AppSvr> => {
    
    
   // fetch
  };
}

export default new DefaultApi();

// 返回数据model
//ApiV1AppSvr.ts
/**
 * @property `[status]` 1表示正常，非1请求错误
 * @property `[data]`
 */
export interface ApiV1AppSvr {
    
    
  /**
   * 1表示正常，非1请求错误
   */
  status?: number;
  data?: Array<models.ApiV1AppSvrData>;
}

//ApiV1AppSvrData.ts
/**
 * @property `appName` 应用名
 * @property `svrName` 服务名
 * @property `createTime` 创建时间
 * @property `creator` 创建人
 */
export interface ApiV1AppSvrData {
    
    
  /**
   * 应用名
   */
  appName: string;
  /**
   * 服务名
   */
  svrName: string;
  /**
   * 创建时间
   */
  createTime: string;
  /**
   * 创建人
   */
  creator: string;
}

Workflow of auto-service

The yapi data conversion process is as follows:

1. According to the yapi address, download yapi json;
2. Convert yapi json to swagger format, start the express service, and temporarily store the data stream;
3. Download the swagger json data stream, compare it with the local cache data, and start a new express service for user operation and merger;
4. After the user operation is over, update the local cache data;
5. After a series of checks, including tags check and risk check, it is written into a temporary file;
6. Use the java command to convert the swagger data in the temporary file into typescript api and models.

question

Ignore the generated product

Because I don't use the product directly, but intercept the required parts from it, so ignore the git tracking and modify .gitignorethe file specifically: add /src/services.

The program starts and runs with an error

Because the requests in our own project use some middleware to uniformly intercept requests and replies, the APIs generated by auto-services cannot be used directly. The generated product may cause an error to be reported when the project is running. On the one hand, it may be due to the lack of dependent packages, on the other hand, it may be a json format error, or an eslint error, so it is necessary to bypass the generated folder during operation. Specific modification tsconfig.json, add:

"exclude": [
    "src/services"
]

If there are any mistakes in the above, please correct me.

quote

github

doc

Welcome everyone to leave a message to discuss, I wish you a smooth work and a happy life!

I am the front end of bigo, see you in the next issue.