@ts-tool/ts-codegen-cli v3.3.4
TS Codegen Cli
TS Codegen 是一个用于生成「前端接口层代码」以及对应「TypeScript 定义」的工具。你只需要提供一个 Swagger 或 Openapi 的 JSON 文件,它就可以为您生成相应的代码。
开始
1. 安装
npm install @ts-tool/ts-codegen-cli -D
2. 生成配置文件
npx ts-codegen init
这个命令会在你的 project 根目录下生成一个配置文件:ts-codegen.config.json。
3. 修改配置文件
根据自己的需求修改文件 ts-codegen.config.json,其配置项如下:
output
: string 类型,必填项。 用于输出生成代码。actionCreatorImport
: string 类型,必填项。 用于导入createRequestAction
方法。 你可以自定义createRequestAction
方法,也可以参考示例(examples/utils/requestActionCreators.ts)。clients
: array 类型,可选项。 配置你项目的 swagger/openapi json 的 url 地址。 通过这个选项,你可以从远端 url 生成代码。data
: array 类型,可选项。 和 clients 一样,也是用于配置 swagger/openapi json 的地址,不过这个地址是你本地 swagger/openapi 所在的路径。通过这个选项,你可以从本地文件生成代码。options
: 可选项,用于一些额外配置。typeWithPrefix
: boolean 类型,可选项,默认为 false。 如果设置为 true,会为所有的生成的 interface 和 type 加上前缀,其中 interface 加上I
前缀,type 加上T
前缀。backwardCompatible
: boolean 类型,可选项,默认为 false。 用于兼容老版本,一般不推荐设置为 true。如果你使用了之前的版本,并且希望尽可能兼容以前的老版本,可以将其设置为 true。
注意事项
- 提供的 Swagger/Openapi json 中,必须保证每个 API 请求都包含属性
operationId
。
从 0.7.x 版本迁移到 1.0.x
- 修改 package.json。将原来的
@ts-tool/ts-codegen
拆分成了两个包:@ts-tool/ts-codegen-core
和ts-tool/ts-codegen-cli
,因此需要修改 package.json。
"devDependencies": {
"@ts-tool/ts-codegen-cli": "^1.0.0"
}
- 如果您想尽可能的兼容之前的代码,请修改 ts-codegen.config.json 文件,增加:
"options": {
"typeWithPrefix": true,
"backwardCompatible": true
}
但是,由于修复了一些 bug,可能还是会导致生成的文件有一些细微的变化,不过这些变化不会对您的项目造成太大影响,建议直接保留。
- 如果您不想兼容之前的老代码,新版本带来的影响如下:
- 修改 request 的名字和 type,原来是直接取 swagger 的 operation id 作为名字和 type,现在将其转为驼峰命名格式。
before: getScheduleDetailsByDateUsingGET
after: getScheduleDetailsByDateUsingGet
- 在 swagger v2 中,requestBody 取 swagger 提供的名字。但是为了和 v3 保持一致,requestBody 的 type 和 request params 名字都变成了
requestBody
。
// before:
export const formMultipartWithFile = createRequestAction<{
fileRequest: { data?: TPet; file: string; slice?: string[]; string?: string };
}>("formMultipartWithFile", ({ fileRequest }) => ({
url: `/demo/forms/multipart`,
method: "post",
data: fileRequest,
headers: { "Content-Type": "multipart/form-data" },
}));
// after:
export const formMultipartWithFile = createRequestAction<{
requestBody: { data?: TPet; file: string; slice?: string[]; string?: string };
}>("formMultipartWithFile", ({ requestBody }) => ({
url: `/demo/forms/multipart`,
method: "post",
data: requestBody,
headers: { "Content-Type": "multipart/form-data" },
}));
- 修正 enum 名字,原先是 propName + propName,现在是 parentPropName(或者 operationID) + propName
// before:
export enum TagsTags {
"z" = "z",
"b" = "b",
"c" = "c",
"a" = "a",
}
// after:
export enum FindPetsTags {
"z" = "z",
"b" = "b",
"c" = "c",
"a" = "a",
}
- 将 query name 明确在 request 中,而非 ES 结构的方式。
// after:
export const getItems = createRequestAction<
{
limit?: number;
page?: number;
sort?: string[];
},
TItems
>(\"getItems\", ({ page, limit, sort }) => ({
url: `/items`,
method: \"get\",
params: {
page,
limit,
sort,
},
}));
1 year ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago