前提・実現したいこと
Nuxt-TypeScriptでSwagger-UIもどきを作成しています。
OpenAPISpecV3に準拠したJSONを、Swagger-Parser経由でOpenAPISpecV3.Document型をつけて受け取りたいです。
発生している問題・エラーメッセージ
Swagger-Parserを経由するとconst api
にいるはずのkeyservers
が取得できず以下の静的エラーが検出されます。
ERROR ERROR in /(省略)/client/pages/apiDoc.vue(29,21): nuxt:typescript 21:25:30 29:21 Property 'servers' does not exist on type 'Document'. 27 | 28 | console.log(Object.keys(api)) > 29 | console.log(api.servers) | ^ 30 | 31 | const isV3 = (openapi: OpenAPI.Document): openapi is OpenAPIV3.Document => 32 | 'openapi' in openapi
該当のソースコード
nuxt
1<script lang="ts"> 2import { Component, Vue } from 'nuxt-property-decorator' 3import SwaggerParser from 'swagger-parser' 4import { OpenAPI, OpenAPIV3 } from 'openapi-types' 5 6@Component({ 7 async asyncData({ route }) { 8 const apiServiceId = route.query.apiServiceId 9 const api = 10 (await SwaggerParser.parse(`/openApiSpec/${apiServiceId}.json`, { 11 parse: { json: true } 12 })) || {} 13 14 // 以下の実行結果は次の通り。["info", "openapi", "servers", "paths", "components", "tags"] 15 console.log(Object.keys(api)) 16 // 以下はエラー「Property 'servers' does not exist on type 'Document'.」となる 17 console.log(api.servers) 18 19 const isV3 = (openapi: OpenAPI.Document): openapi is OpenAPIV3.Document => 20 'openapi' in openapi 21 22 // 以下の実行結果はtrue。 23 console.log(isV3(api)) 24 25 return { 26 apiDoc: api 27 } 28 } 29}) 30export default class extends Vue {} 31</script>
json
1{ 2 "info": { 3 "title": "tchop app", 4 "version": "0.0.1", 5 "description": "省略" 6 }, 7 "openapi": "3.0.0", 8 "servers": [ 9 { 10 "url": "https://tchop.io" 11 } 12 ], 13(中略) 14}
補足情報(FW/ツールのバージョンなど)
- 使用したJSON(SwaggerHubから拝借)
https://app.swaggerhub.com/apiproxy/registry/tchop.io/tchop/0.0.1
- SwaggerParser
https://github.com/APIDevTools/swagger-parser
- Nuxt-TSの設定
あなたの回答
tips
プレビュー