Automated TypeScript API Generation Tool for Frontend Development

The article introduces a TypeScript automation tool designed to generate API code from Swagger specifications, addressing challenges in complex B‑side business projects where front‑end developers often lack direct insight into backend constant values and API changes.

Background: In many B‑end projects, numerous constant types and historical reasons make it difficult for front‑end code to understand backend meanings, leading to high onboarding costs and maintenance difficulties. API communication typically relies on Swagger docs, oral hand‑offs, or manual info documents, which are inefficient and provide little proactive awareness for front‑end developers. Manual creation of TypeScript types for new projects is error‑prone and time‑consuming.

Core Features: Automatic generation of API function bodies. Automatic generation of API interfaces. Automatic creation of local mock files. Support for custom template output. Conversion between camelCase and snake_case. Customizable header transformations. Compatibility with both Swagger v2 and v3 specifications.

Conversion Principle: The tool parses the Swagger API documentation structure, extracts key attributes, and splits them for template‑based code generation. Template functions can be overridden to match specific business output formats.

Project Integration Steps: Install the package: npm install @bilibili-business/ad-swagger-fe --registry=http://registry.npm.bilibili.co Create a swagger.config.js file at the project root (directory as needed). Copy the example configuration code into swagger.config.js . Replace the source URL in the configuration with the target Swagger documentation URL. Run the generation script: node ./swagger.config.js . The tool creates a swagger folder under the project's src directory containing the generated files. Adjust generated content and tool parameters (e.g., headers) as required.

Project Practice: The tool has been widely adopted in commercial front‑end projects, achieving an overall adoption rate of 85% and 100% in certain e‑commerce projects. Generated API functions and TypeScript interfaces can be used directly without manual coding, improving development efficiency by approximately one person‑day per project. For example, the tool processed 1,556 backend API endpoints.

Developer Q&A: Readers are invited to share their experiences with TS engineering transformations, with a chance to win promotional items.