質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

596閲覧

TypeScriptでOpenAPIV3.Documentの型をつけたい

maccostar

総合スコア6

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/01/23 13:47

編集2022/01/12 10:55

前提・実現したいこと

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の設定

https://github.com/m-mitsuhide/nuxt-ts-starter

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問