Spring Boot 接口如何像 TRPC 一样方便地为前端提供类型提示？

在 Spring Boot 中，虽然不像 TRPC 那样原生支持自动生成前端类型提示，但可以通过一些工具和技巧来实现类似的功能，为前端提供类型提示。以下是几种常见的方法：

1. 使用 OpenAPI/Swagger 生成 API 文档和类型定义

Spring Boot 支持通过 springdoc-openapi 或 springfox 自动生成 OpenAPI/Swagger 文档。前端可以使用这些文档生成类型定义。

步骤：

1. 添加依赖：

   <dependency>
      <groupId>org.springdoc</groupId>
      <artifactId>springdoc-openapi-ui</artifactId>
      <version>1.6.14</version>
   </dependency>
   

2. 配置 Swagger： 在 application.properties 或 application.yml 中配置 Swagger：

   springdoc.api-docs.enabled=true
   springdoc.swagger-ui.path=/swagger-ui.html
   

3. 生成 OpenAPI 文档： 启动应用后，访问 /v3/api-docs 或 /swagger-ui.html 查看生成的 API 文档。

4. 前端使用 OpenAPI 生成类型定义： 前端可以使用 openapi-generator 或 swagger-typescript-api 等工具生成 TypeScript 类型定义。

   例如，使用 swagger-typescript-api：

   npx swagger-typescript-api -p http://localhost:8080/v3/api-docs -o ./src/api -n api.ts
   

2. 使用 GraphQL 替代 REST

GraphQL 天然支持类型系统，前端可以直接从 GraphQL Schema 中获取类型提示。

步骤：

1. 添加依赖：

   <dependency>
      <groupId>com.graphql-java-kickstart</groupId>
      <artifactId>graphql-spring-boot-starter</artifactId>
      <version>11.1.0</version>
   </dependency>
   <dependency>
      <groupId>com.graphql-java-kickstart</groupId>
      <artifactId>graphql-java-tools</artifactId>
      <version>11.1.0</version>
   </dependency>
   

2. 定义 GraphQL Schema： 在 src/main/resources 下创建 schema.graphqls 文件，定义 GraphQL Schema。

3. 实现 Resolver： 实现对应的 Resolver 类来处理 GraphQL 请求。

4. 前端使用 GraphQL Code Generator： 前端可以使用 graphql-code-generator 生成 TypeScript 类型定义。

   例如：

   npx graphql-codegen --config codegen.yml
   

   codegen.yml 配置示例：

   schema: http://localhost:8080/graphql
   documents: src/**/*.graphql
   generates:
    src/generated/types.ts:
      plugins:
        - typescript
        - typescript-operations
   

3. 使用自定义工具生成类型定义

如果不想使用 OpenAPI 或 GraphQL，可以编写自定义工具来生成 TypeScript 类型定义。例如，通过反射读取 Spring Boot 的 Controller 和 DTO 类，生成对应的 TypeScript 类型。

步骤：

1. 编写自定义工具： 使用 Java 反射或注解处理器读取 Controller 和 DTO 类，生成 TypeScript 类型定义。

2. 生成 TypeScript 文件： 将生成的 TypeScript 文件输出到前端项目中。

3. 前端使用生成的类型定义： 前端可以直接导入生成的 TypeScript 文件，获取类型提示。

4. 使用 TypeScript 的 d.ts 文件

手动编写 TypeScript 的 d.ts 文件，定义接口的类型。虽然这种方法比较繁琐，但对于小型项目或特定场景可能是一个简单的解决方案。

步骤：

1. 手动编写 d.ts 文件： 根据 Spring Boot 的接口定义，手动编写对应的 TypeScript 类型定义。

2. 前端使用 d.ts 文件： 前端项目引入 d.ts 文件，获取类型提示。

总结

• OpenAPI/Swagger：适合 RESTful API，自动生成文档和类型定义。
• GraphQL：适合需要灵活查询的场景，天然支持类型系统。
• 自定义工具：适合需要高度定制化的场景。
• 手动编写 d.ts 文件：适合小型项目或特定场景。

根据项目需求选择合适的方法，可以为前端提供方便的类型提示，提升开发效率。