Use auto-service to reject any

This article was originally published at: github.com/bigo-fronte… Welcome to follow and reprint.

background

Bigo BRPC is my first react pure TS development project. At the beginning, due to the rapid iteration, the project had a lot of data of any type, mainly API request and response data. Too much ANY, on the one hand, is not standard, on the other hand, bypasses the verification, and the advantage of TS will not exist.

Based on the above problems, the solutions are as follows:

Use auto-service in conjunction with the open source mock platform YAPI to generate models automatically.

Auto – service introduction

Auto-service automatically generates TypeScript API call codes and request/ Response interface type definitions based on Swagger or YApi interface documents (JSON). Auto-service relies on Java generation tools customized based on the open source project Swagger Codegen. Ensure that Java is installed.

This article describes how to use with YAPI.

Auto – service use

The installation

npm i -D auto-service

The configuration file

Create the configuration file json2service.json and obtain the token under the Settings TAB of 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"
}
Copy the code

Add generate Command

Add commands to package.json:

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

-c filename Indicates that a configuration file is used. –clear indicates that the old product is cleared before the new product is generated. — Models Indicates that only interfaces are produced.

For details about other configurations, see the documentation.

run

npm run auto2ts

The effect

The sample API:

Generate results:

The MODELS for the API request parameters are in the API folder, and the Model for the API return data is in the Model folder.

// Request parameter model
// DefaultApi.ts

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

/ * * *@description * apiV1AppSvrGet parameters@property 'appName' Application name *@property '[svrName]' service name */
export interface ParamsapiV1AppSvrGet {
  // queryParams
  /** * Application name */
  appName: string;
  /** * Service name */svrName? :string;
}

export class DefaultApi {
  / * * * *@summary Get all application services *@param params ParamsapiV1AppSvrGet
   * @returns models.ApiV1AppSvr
   */
  publicapiV1AppSvrGet = ( params: ParamsapiV1AppSvrGet, opt? : ExtraFetchParams ): AjaxPromise<models.ApiV1AppSvr> => {// fetch
  };
}

export default new DefaultApi();

Copy the code

// Return the data model
//ApiV1AppSvr.ts
/ * * *@property '[status]' 1 indicates normal, non-1 request error *@property `[data]`
 */
export interface ApiV1AppSvr {
  /** * 1 indicates normal, non-1 request error */status? :number; data? :Array<models.ApiV1AppSvrData>;
}

//ApiV1AppSvrData.ts
/ * * *@property 'appName' Application name *@property 'svrName' service name *@property 'createTime' createTime *@property Creator */
export interface ApiV1AppSvrData {
  /** * Application name */
  appName: string;
  /** * Service name */
  svrName: string;
  /** * create time */
  createTime: string;
  /** ** founder */
  creator: string;
}

Copy the code

The workflow of auto-service

The yAPI data conversion process is as follows:

Download yAPI JSON according to the yAPI address;
Convert YAPI JSON to Swagger format, start Express service, and store data stream temporarily;
Download Swagger JSON data stream, make diff comparison with local cache data, and set up express service for user operation and merger;
After user operations are complete, local cached data is updated.
After a series of checks, including tags check and risk check, write temporary files;
Convert Swagger Data from temporary files to typescript APIS and models using Java commands.

The problem

Ignore generated products

Since I don’t use the artifact directly, but instead take what I need from it, I will ignore the git trace and modify the.gitignore file: add/SRC /services.

An error occurred during program startup

The API generated by Auto-services cannot be used directly because of the middleware used to intercept requests and replies in its own project. The generated artifacts can cause the project to run with errors, either from missing dependency packages, json formatting errors, or ESLint errors, so you need to bypass the generated folder at run time. Modify tsconfig.json and add:

"exclude": [
    "src/services"
]
Copy the code

Above, if there are mistakes, welcome to correct.

reference

github

doc

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

I’m bigO front. See you next time.

Use auto-service to reject any