Currently, I am utilizing the Swagger/OpenAPI Codegen tool to automatically generate an API client for the Fetch client within my Vue application. However, I have decided that I would prefer to make use of Axios instead. To begin this transition, I initiated the process by employing the typescript-axios code generator provided by OpenAPITools:
java -jar .\openapi-generator-cli.jar generate -i http://localhost:5000/swagger/v1/swagger.json -g typescript-axios -o app\api
Afterwards, I attempted to assign the typed response into a local variable of the exact type:
@Component
export default class Themes extends Vue {
private themesApi!: ThemesApi;
private themes: Theme[];
constructor() {
super();
this.themes = [];
}
private async mounted() {
const apiConfig: Configuration = {
basePath: config.API_URL,
};
this.themesApi = new ThemesApi(apiConfig);
}
private async getThemes() {
this.themes = await this.themesApi.getThemes();
}
}
Despite all efforts, an unexpected TypeScript error emerged:
> 139:5 Type 'AxiosResponse<Theme[]>' is missing the following
> properties from type 'Theme[]': length, pop, push, concat, and 28
> more.
> 137 |
> 138 | private async getThemes() {
> > 139 | this.themes = await this.themesApi.getThemes();
> | ^
It is perplexing as the local variable aligns perfectly with the same type: https://i.stack.imgur.com/z2Rto.png
This contradiction has left me puzzled. Why is this error occurring?