committed by
GitHub
4 changed files with 40 additions and 40 deletions
@ -10,7 +10,7 @@ Es gibt viele Tools zum Generieren von Clients aus **OpenAPI**. |
|||||
|
|
||||
Ein gängiges Tool ist <a href="https://openapi-generator.tech/" class="external-link" target="_blank">OpenAPI Generator</a>. |
Ein gängiges Tool ist <a href="https://openapi-generator.tech/" class="external-link" target="_blank">OpenAPI Generator</a>. |
||||
|
|
||||
Wenn Sie ein **Frontend** erstellen, ist <a href="https://github.com/ferdikoomen/openapi-typescript-codegen" class="external-link" target="_blank">openapi-typescript-codegen</a> eine sehr interessante Alternative. |
Wenn Sie ein **Frontend** erstellen, ist <a href="https://github.com/hey-api/openapi-ts" class="external-link" target="_blank">openapi-ts</a> eine sehr interessante Alternative. |
||||
|
|
||||
## Client- und SDK-Generatoren – Sponsor |
## Client- und SDK-Generatoren – Sponsor |
||||
|
|
||||
@ -58,14 +58,14 @@ Und dieselben Informationen aus den Modellen, die in OpenAPI enthalten sind, kö |
|||||
|
|
||||
Nachdem wir nun die Anwendung mit den Modellen haben, können wir den Client-Code für das Frontend generieren. |
Nachdem wir nun die Anwendung mit den Modellen haben, können wir den Client-Code für das Frontend generieren. |
||||
|
|
||||
#### `openapi-typescript-codegen` installieren |
#### `openapi-ts` installieren |
||||
|
|
||||
Sie können `openapi-typescript-codegen` in Ihrem Frontend-Code installieren mit: |
Sie können `openapi-ts` in Ihrem Frontend-Code installieren mit: |
||||
|
|
||||
<div class="termy"> |
<div class="termy"> |
||||
|
|
||||
```console |
```console |
||||
$ npm install openapi-typescript-codegen --save-dev |
$ npm install @hey-api/openapi-ts --save-dev |
||||
|
|
||||
---> 100% |
---> 100% |
||||
``` |
``` |
||||
@ -74,7 +74,7 @@ $ npm install openapi-typescript-codegen --save-dev |
|||||
|
|
||||
#### Client-Code generieren |
#### Client-Code generieren |
||||
|
|
||||
Um den Client-Code zu generieren, können Sie das Kommandozeilentool `openapi` verwenden, das soeben installiert wurde. |
Um den Client-Code zu generieren, können Sie das Kommandozeilentool `openapi-ts` verwenden, das soeben installiert wurde. |
||||
|
|
||||
Da es im lokalen Projekt installiert ist, könnten Sie diesen Befehl wahrscheinlich nicht direkt aufrufen, sondern würden ihn in Ihre Datei `package.json` einfügen. |
Da es im lokalen Projekt installiert ist, könnten Sie diesen Befehl wahrscheinlich nicht direkt aufrufen, sondern würden ihn in Ihre Datei `package.json` einfügen. |
||||
|
|
||||
@ -87,12 +87,12 @@ Diese könnte so aussehen: |
|||||
"description": "", |
"description": "", |
||||
"main": "index.js", |
"main": "index.js", |
||||
"scripts": { |
"scripts": { |
||||
"generate-client": "openapi --input http://localhost:8000/openapi.json --output ./src/client --client axios --useOptions --useUnionTypes" |
"generate-client": "openapi-ts --input http://localhost:8000/openapi.json --output ./src/client --client axios" |
||||
}, |
}, |
||||
"author": "", |
"author": "", |
||||
"license": "", |
"license": "", |
||||
"devDependencies": { |
"devDependencies": { |
||||
"openapi-typescript-codegen": "^0.20.1", |
"@hey-api/openapi-ts": "^0.27.38", |
||||
"typescript": "^4.6.2" |
"typescript": "^4.6.2" |
||||
} |
} |
||||
} |
} |
||||
@ -106,7 +106,7 @@ Nachdem Sie das NPM-Skript `generate-client` dort stehen haben, können Sie es a |
|||||
$ npm run generate-client |
$ npm run generate-client |
||||
|
|
||||
[email protected] generate-client /home/user/code/frontend-app |
[email protected] generate-client /home/user/code/frontend-app |
||||
> openapi --input http://localhost:8000/openapi.json --output ./src/client --client axios --useOptions --useUnionTypes |
> openapi-ts --input http://localhost:8000/openapi.json --output ./src/client --client axios |
||||
``` |
``` |
||||
|
|
||||
</div> |
</div> |
||||
@ -254,12 +254,12 @@ Da das Endergebnis nun in einer Datei `openapi.json` vorliegt, würden Sie die ` |
|||||
"description": "", |
"description": "", |
||||
"main": "index.js", |
"main": "index.js", |
||||
"scripts": { |
"scripts": { |
||||
"generate-client": "openapi --input ./openapi.json --output ./src/client --client axios --useOptions --useUnionTypes" |
"generate-client": "openapi-ts --input ./openapi.json --output ./src/client --client axios" |
||||
}, |
}, |
||||
"author": "", |
"author": "", |
||||
"license": "", |
"license": "", |
||||
"devDependencies": { |
"devDependencies": { |
||||
"openapi-typescript-codegen": "^0.20.1", |
"@hey-api/openapi-ts": "^0.27.38", |
||||
"typescript": "^4.6.2" |
"typescript": "^4.6.2" |
||||
} |
} |
||||
} |
} |
||||
|
@ -10,7 +10,7 @@ |
|||||
|
|
||||
⚠ 🧰 <a href="https://openapi-generator.tech/" class="external-link" target="_blank">🗄 🚂</a>. |
⚠ 🧰 <a href="https://openapi-generator.tech/" class="external-link" target="_blank">🗄 🚂</a>. |
||||
|
|
||||
🚥 👆 🏗 **🕸**, 📶 😌 🎛 <a href="https://github.com/ferdikoomen/openapi-typescript-codegen" class="external-link" target="_blank">🗄-📕-🇦🇪</a>. |
🚥 👆 🏗 **🕸**, 📶 😌 🎛 <a href="https://github.com/hey-api/openapi-ts" class="external-link" target="_blank">🗄-📕-🇦🇪</a>. |
||||
|
|
||||
## 🏗 📕 🕸 👩💻 |
## 🏗 📕 🕸 👩💻 |
||||
|
|
||||
@ -46,14 +46,14 @@ |
|||||
|
|
||||
🔜 👈 👥 ✔️ 📱 ⏮️ 🏷, 👥 💪 🏗 👩💻 📟 🕸. |
🔜 👈 👥 ✔️ 📱 ⏮️ 🏷, 👥 💪 🏗 👩💻 📟 🕸. |
||||
|
|
||||
#### ❎ `openapi-typescript-codegen` |
#### ❎ `openapi-ts` |
||||
|
|
||||
👆 💪 ❎ `openapi-typescript-codegen` 👆 🕸 📟 ⏮️: |
👆 💪 ❎ `openapi-ts` 👆 🕸 📟 ⏮️: |
||||
|
|
||||
<div class="termy"> |
<div class="termy"> |
||||
|
|
||||
```console |
```console |
||||
$ npm install openapi-typescript-codegen --save-dev |
$ npm install @hey-api/openapi-ts --save-dev |
||||
|
|
||||
---> 100% |
---> 100% |
||||
``` |
``` |
||||
@ -62,7 +62,7 @@ $ npm install openapi-typescript-codegen --save-dev |
|||||
|
|
||||
#### 🏗 👩💻 📟 |
#### 🏗 👩💻 📟 |
||||
|
|
||||
🏗 👩💻 📟 👆 💪 ⚙️ 📋 ⏸ 🈸 `openapi` 👈 🔜 🔜 ❎. |
🏗 👩💻 📟 👆 💪 ⚙️ 📋 ⏸ 🈸 `openapi-ts` 👈 🔜 🔜 ❎. |
||||
|
|
||||
↩️ ⚫️ ❎ 🇧🇿 🏗, 👆 🎲 🚫🔜 💪 🤙 👈 📋 🔗, ✋️ 👆 🔜 🚮 ⚫️ 🔛 👆 `package.json` 📁. |
↩️ ⚫️ ❎ 🇧🇿 🏗, 👆 🎲 🚫🔜 💪 🤙 👈 📋 🔗, ✋️ 👆 🔜 🚮 ⚫️ 🔛 👆 `package.json` 📁. |
||||
|
|
||||
@ -75,12 +75,12 @@ $ npm install openapi-typescript-codegen --save-dev |
|||||
"description": "", |
"description": "", |
||||
"main": "index.js", |
"main": "index.js", |
||||
"scripts": { |
"scripts": { |
||||
"generate-client": "openapi --input http://localhost:8000/openapi.json --output ./src/client --client axios" |
"generate-client": "openapi-ts --input http://localhost:8000/openapi.json --output ./src/client --client axios" |
||||
}, |
}, |
||||
"author": "", |
"author": "", |
||||
"license": "", |
"license": "", |
||||
"devDependencies": { |
"devDependencies": { |
||||
"openapi-typescript-codegen": "^0.20.1", |
"@hey-api/openapi-ts": "^0.27.38", |
||||
"typescript": "^4.6.2" |
"typescript": "^4.6.2" |
||||
} |
} |
||||
} |
} |
||||
@ -94,7 +94,7 @@ $ npm install openapi-typescript-codegen --save-dev |
|||||
$ npm run generate-client |
$ npm run generate-client |
||||
|
|
||||
[email protected] generate-client /home/user/code/frontend-app |
[email protected] generate-client /home/user/code/frontend-app |
||||
> openapi --input http://localhost:8000/openapi.json --output ./src/client --client axios |
> openapi-ts --input http://localhost:8000/openapi.json --output ./src/client --client axios |
||||
``` |
``` |
||||
|
|
||||
</div> |
</div> |
||||
@ -235,12 +235,12 @@ FastAPI ⚙️ **😍 🆔** 🔠 *➡ 🛠️*, ⚫️ ⚙️ **🛠️ 🆔** |
|||||
"description": "", |
"description": "", |
||||
"main": "index.js", |
"main": "index.js", |
||||
"scripts": { |
"scripts": { |
||||
"generate-client": "openapi --input ./openapi.json --output ./src/client --client axios" |
"generate-client": "openapi-ts --input ./openapi.json --output ./src/client --client axios" |
||||
}, |
}, |
||||
"author": "", |
"author": "", |
||||
"license": "", |
"license": "", |
||||
"devDependencies": { |
"devDependencies": { |
||||
"openapi-typescript-codegen": "^0.20.1", |
"@hey-api/openapi-ts": "^0.27.38", |
||||
"typescript": "^4.6.2" |
"typescript": "^4.6.2" |
||||
} |
} |
||||
} |
} |
||||
|
@ -10,7 +10,7 @@ There are many tools to generate clients from **OpenAPI**. |
|||||
|
|
||||
A common tool is <a href="https://openapi-generator.tech/" class="external-link" target="_blank">OpenAPI Generator</a>. |
A common tool is <a href="https://openapi-generator.tech/" class="external-link" target="_blank">OpenAPI Generator</a>. |
||||
|
|
||||
If you are building a **frontend**, a very interesting alternative is <a href="https://github.com/ferdikoomen/openapi-typescript-codegen" class="external-link" target="_blank">openapi-typescript-codegen</a>. |
If you are building a **frontend**, a very interesting alternative is <a href="https://github.com/hey-api/openapi-ts" class="external-link" target="_blank">openapi-ts</a>. |
||||
|
|
||||
## Client and SDK Generators - Sponsor |
## Client and SDK Generators - Sponsor |
||||
|
|
||||
@ -58,14 +58,14 @@ And that same information from the models that is included in OpenAPI is what ca |
|||||
|
|
||||
Now that we have the app with the models, we can generate the client code for the frontend. |
Now that we have the app with the models, we can generate the client code for the frontend. |
||||
|
|
||||
#### Install `openapi-typescript-codegen` |
#### Install `openapi-ts` |
||||
|
|
||||
You can install `openapi-typescript-codegen` in your frontend code with: |
You can install `openapi-ts` in your frontend code with: |
||||
|
|
||||
<div class="termy"> |
<div class="termy"> |
||||
|
|
||||
```console |
```console |
||||
$ npm install openapi-typescript-codegen --save-dev |
$ npm install @hey-api/openapi-ts --save-dev |
||||
|
|
||||
---> 100% |
---> 100% |
||||
``` |
``` |
||||
@ -74,7 +74,7 @@ $ npm install openapi-typescript-codegen --save-dev |
|||||
|
|
||||
#### Generate Client Code |
#### Generate Client Code |
||||
|
|
||||
To generate the client code you can use the command line application `openapi` that would now be installed. |
To generate the client code you can use the command line application `openapi-ts` that would now be installed. |
||||
|
|
||||
Because it is installed in the local project, you probably wouldn't be able to call that command directly, but you would put it on your `package.json` file. |
Because it is installed in the local project, you probably wouldn't be able to call that command directly, but you would put it on your `package.json` file. |
||||
|
|
||||
@ -87,12 +87,12 @@ It could look like this: |
|||||
"description": "", |
"description": "", |
||||
"main": "index.js", |
"main": "index.js", |
||||
"scripts": { |
"scripts": { |
||||
"generate-client": "openapi --input http://localhost:8000/openapi.json --output ./src/client --client axios --useOptions --useUnionTypes" |
"generate-client": "openapi-ts --input http://localhost:8000/openapi.json --output ./src/client --client axios" |
||||
}, |
}, |
||||
"author": "", |
"author": "", |
||||
"license": "", |
"license": "", |
||||
"devDependencies": { |
"devDependencies": { |
||||
"openapi-typescript-codegen": "^0.20.1", |
"@hey-api/openapi-ts": "^0.27.38", |
||||
"typescript": "^4.6.2" |
"typescript": "^4.6.2" |
||||
} |
} |
||||
} |
} |
||||
@ -106,7 +106,7 @@ After having that NPM `generate-client` script there, you can run it with: |
|||||
$ npm run generate-client |
$ npm run generate-client |
||||
|
|
||||
[email protected] generate-client /home/user/code/frontend-app |
[email protected] generate-client /home/user/code/frontend-app |
||||
> openapi --input http://localhost:8000/openapi.json --output ./src/client --client axios --useOptions --useUnionTypes |
> openapi-ts --input http://localhost:8000/openapi.json --output ./src/client --client axios |
||||
``` |
``` |
||||
|
|
||||
</div> |
</div> |
||||
@ -254,12 +254,12 @@ Now as the end result is in a file `openapi.json`, you would modify the `package |
|||||
"description": "", |
"description": "", |
||||
"main": "index.js", |
"main": "index.js", |
||||
"scripts": { |
"scripts": { |
||||
"generate-client": "openapi --input ./openapi.json --output ./src/client --client axios --useOptions --useUnionTypes" |
"generate-client": "openapi-ts --input ./openapi.json --output ./src/client --client axios" |
||||
}, |
}, |
||||
"author": "", |
"author": "", |
||||
"license": "", |
"license": "", |
||||
"devDependencies": { |
"devDependencies": { |
||||
"openapi-typescript-codegen": "^0.20.1", |
"@hey-api/openapi-ts": "^0.27.38", |
||||
"typescript": "^4.6.2" |
"typescript": "^4.6.2" |
||||
} |
} |
||||
} |
} |
||||
|
@ -10,7 +10,7 @@ |
|||||
|
|
||||
一个常见的工具是 <a href="https://openapi-generator.tech/" class="external-link" target="_blank">OpenAPI Generator</a>。 |
一个常见的工具是 <a href="https://openapi-generator.tech/" class="external-link" target="_blank">OpenAPI Generator</a>。 |
||||
|
|
||||
如果您正在开发**前端**,一个非常有趣的替代方案是 <a href="https://github.com/ferdikoomen/openapi-typescript-codegen" class="external-link" target="_blank">openapi-typescript-codegen</a>。 |
如果您正在开发**前端**,一个非常有趣的替代方案是 <a href="https://github.com/hey-api/openapi-ts" class="external-link" target="_blank">openapi-ts</a>。 |
||||
|
|
||||
## 生成一个 TypeScript 前端客户端 |
## 生成一个 TypeScript 前端客户端 |
||||
|
|
||||
@ -46,14 +46,14 @@ OpenAPI中所包含的模型里有相同的信息可以用于 **生成客户端 |
|||||
|
|
||||
现在我们有了带有模型的应用,我们可以为前端生成客户端代码。 |
现在我们有了带有模型的应用,我们可以为前端生成客户端代码。 |
||||
|
|
||||
#### 安装 `openapi-typescript-codegen` |
#### 安装 `openapi-ts` |
||||
|
|
||||
您可以使用以下工具在前端代码中安装 `openapi-typescript-codegen`: |
您可以使用以下工具在前端代码中安装 `openapi-ts`: |
||||
|
|
||||
<div class="termy"> |
<div class="termy"> |
||||
|
|
||||
```console |
```console |
||||
$ npm install openapi-typescript-codegen --save-dev |
$ npm install @hey-api/openapi-ts --save-dev |
||||
|
|
||||
---> 100% |
---> 100% |
||||
``` |
``` |
||||
@ -62,7 +62,7 @@ $ npm install openapi-typescript-codegen --save-dev |
|||||
|
|
||||
#### 生成客户端代码 |
#### 生成客户端代码 |
||||
|
|
||||
要生成客户端代码,您可以使用现在将要安装的命令行应用程序 `openapi`。 |
要生成客户端代码,您可以使用现在将要安装的命令行应用程序 `openapi-ts`。 |
||||
|
|
||||
因为它安装在本地项目中,所以您可能无法直接使用此命令,但您可以将其放在 `package.json` 文件中。 |
因为它安装在本地项目中,所以您可能无法直接使用此命令,但您可以将其放在 `package.json` 文件中。 |
||||
|
|
||||
@ -75,12 +75,12 @@ $ npm install openapi-typescript-codegen --save-dev |
|||||
"description": "", |
"description": "", |
||||
"main": "index.js", |
"main": "index.js", |
||||
"scripts": { |
"scripts": { |
||||
"generate-client": "openapi --input http://localhost:8000/openapi.json --output ./src/client --client axios" |
"generate-client": "openapi-ts --input http://localhost:8000/openapi.json --output ./src/client --client axios" |
||||
}, |
}, |
||||
"author": "", |
"author": "", |
||||
"license": "", |
"license": "", |
||||
"devDependencies": { |
"devDependencies": { |
||||
"openapi-typescript-codegen": "^0.20.1", |
"@hey-api/openapi-ts": "^0.27.38", |
||||
"typescript": "^4.6.2" |
"typescript": "^4.6.2" |
||||
} |
} |
||||
} |
} |
||||
@ -94,7 +94,7 @@ $ npm install openapi-typescript-codegen --save-dev |
|||||
$ npm run generate-client |
$ npm run generate-client |
||||
|
|
||||
[email protected] generate-client /home/user/code/frontend-app |
[email protected] generate-client /home/user/code/frontend-app |
||||
> openapi --input http://localhost:8000/openapi.json --output ./src/client --client axios |
> openapi-ts --input http://localhost:8000/openapi.json --output ./src/client --client axios |
||||
``` |
``` |
||||
|
|
||||
</div> |
</div> |
||||
@ -234,12 +234,12 @@ FastAPI为每个*路径操作*使用一个**唯一ID**,它用于**操作ID** |
|||||
"description": "", |
"description": "", |
||||
"main": "index.js", |
"main": "index.js", |
||||
"scripts": { |
"scripts": { |
||||
"generate-client": "openapi --input ./openapi.json --output ./src/client --client axios" |
"generate-client": "openapi-ts --input ./openapi.json --output ./src/client --client axios" |
||||
}, |
}, |
||||
"author": "", |
"author": "", |
||||
"license": "", |
"license": "", |
||||
"devDependencies": { |
"devDependencies": { |
||||
"openapi-typescript-codegen": "^0.20.1", |
"@hey-api/openapi-ts": "^0.27.38", |
||||
"typescript": "^4.6.2" |
"typescript": "^4.6.2" |
||||
} |
} |
||||
} |
} |
||||
|
Loading…
Reference in new issue