Spring Boot接口如何高效地提供给前端TypeScript类型提示？

在Spring Boot项目中，为了高效地提供给前端TypeScript类型提示，可以采用以下几种方法：

1. 使用Swagger/OpenAPI生成TypeScript类型

Swagger或OpenAPI是一种广泛使用的API描述规范，可以通过它生成TypeScript类型定义。

步骤：

1. 在Spring Boot项目中集成Swagger： 使用springfox或springdoc-openapi库来生成Swagger文档。

   <!-- 使用springdoc-openapi -->
   <dependency>
      <groupId>org.springdoc</groupId>
      <artifactId>springdoc-openapi-ui</artifactId>
      <version>1.6.9</version>
   </dependency>
   

2. 生成Swagger文档： 启动Spring Boot应用后，访问http://localhost:8080/v3/api-docs获取Swagger JSON文档。

3. 使用工具生成TypeScript类型： 使用工具如swagger-typescript-api或openapi-generator将Swagger JSON转换为TypeScript类型。

   npx swagger-typescript-api -p ./swagger.json -o ./src/api -n api.ts
   

   或者使用openapi-generator：

   npx @openapitools/openapi-generator-cli generate -i ./swagger.json -g typescript-axios -o ./src/api
   

2. 使用TypeScript类型生成工具

有一些工具可以直接从Java代码生成TypeScript类型定义，例如typescript-generator。

步骤：

1. 添加typescript-generator插件到Maven或Gradle：

   Maven:

   <plugin>
      <groupId>cz.habarta.typescript-generator</groupId>
      <artifactId>typescript-generator-maven-plugin</artifactId>
      <version>2.32.755</version>
      <executions>
          <execution>
              <id>generate</id>
              <goals>
                  <goal>generate</goal>
              </goals>
              <phase>process-classes</phase>
          </execution>
      </executions>
      <configuration>
          <jsonLibrary>jackson2</jsonLibrary>
          <classes>
              <class>com.example.model.User</class>
              <class>com.example.model.Product</class>
          </classes>
          <outputFile>target/typescript/model.d.ts</outputFile>
      </configuration>
   </plugin>
   

   Gradle:

   plugins {
      id 'cz.habarta.typescript-generator' version '2.32.755'
   }
   
   generateTypeScript {
      jsonLibrary = 'jackson2'
      classes = [
          'com.example.model.User',
          'com.example.model.Product'
      ]
      outputFile = 'build/typescript/model.d.ts'
   }
   

2. 运行生成命令： 运行Maven或Gradle命令生成TypeScript类型定义。

   mvn generate-sources
   

   或

   gradle generateTypeScript
   

3. 手动维护TypeScript类型定义

如果项目规模较小或API变化不频繁，可以选择手动维护TypeScript类型定义。

步骤：

1. 定义TypeScript接口： 根据后端Java模型类手动编写对应的TypeScript接口。

   // User.ts
   export interface User {
      id: number;
      name: string;
      email: string;
   }
   

2. 在API调用中使用： 在前端代码中使用这些类型定义。

   import { User } from './models/User';
   
   async function fetchUser(userId: number): Promise<User> {
      const response = await fetch(`/api/users/${userId}`);
      return response.json();
   }
   

4. 使用GraphQL

如果项目使用GraphQL，可以直接通过GraphQL Schema生成TypeScript类型。

步骤：

1. 定义GraphQL Schema： 在Spring Boot中使用graphql-java或graphql-spring-boot-starter定义GraphQL Schema。

2. 生成TypeScript类型： 使用graphql-code-generator生成TypeScript类型。

   npx graphql-codegen --config codegen.yml
   

   codegen.yml配置示例：

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

总结

• Swagger/OpenAPI：适合需要自动生成API文档和类型定义的场景。
• TypeScript生成工具：适合直接从Java代码生成TypeScript类型的场景。
• 手动维护：适合小型项目或API变化不频繁的场景。
• GraphQL：适合使用GraphQL的项目，可以直接生成TypeScript类型。

根据项目需求和团队习惯选择合适的方法，可以显著提高前后端协作的效率。