前端自动生成接口ts代码

在前端项目中，我们通常会使用TypeScript来增加类型安全性，提高代码质量。对于API接口的类型定义，我们可以手动编写，但如果接口返回的数据结构比较复杂，这样做会比较繁琐。

有一种方法可以自动生成TypeScript类型定义，那就是使用TypeScript的类型推断。

解决方案一：使用TypeScript的类型推断

// 假设我们有一个JSON对象
let data = {
  id: 1,
  name: 'John',
  isStudent: true
};
 
// 我们可以使用TypeScript的类型推断来自动生成接口
type DataType = typeof data;
 
// DataType 就是我们的接口类型
// 这个类型现在就等价于以下的接口定义
/*
interface DataType {
  id: number;
  name: string;
  isStudent: boolean;
}
*/

解决方案二：使用JSON Schema生成TypeScript类型

如果你的后端同学提供了JSON Schema格式的接口文档，你可以使用在线的工具或者npm包来自动生成TypeScript类型。

例如，你可以使用json-schema-to-typescript这个npm包来自动生成TypeScript类型。

首先，你需要安装这个包：

npm install -D json-schema-to-typescript

然后，你可以使用它来生成类型：

// schema.json
{
  "type": "object",
  "properties": {
    "id": {
      "type": "number"
    },
    "name": {
      "type": "string"
    },
    "isStudent": {
      "type": "boolean"
    }
  }
}

npx json-schema-to-typescript schema.json

运行上述命令后，你会得到以下的TypeScript类型定义：

export interface Schema {
  id: number;
  name: string;
  isStudent: boolean;
}

解决方案三：使用axios的responseType生成TypeScript类型

如果你在前端使用axios这个HTTP客户端，你可以设置responseType为'json'，这样axios会自动将响应的数据转换为JSON对象，并且你可以利用TypeScript的类型推断来生成接口类型。

import axios from 'axios';
 
axios.get<DataType>('https://api.example.com/data', {
  responseType: 'json'
}).then(response => {
  // TypeScript会自动将response.data推断为DataType类型
  let data: DataType = response.data;
  // 在这里处理你的数据
});
 
// 注意这里的DataType类型需要你手动定义
interface DataType {
  id: number;
  name: string;
  isStudent: boolean;
}

以上就是根据不同的场景提供的三种自动生成TypeScript类型的方法，你可以根据你的实际需求选择合适的方法。