LoginSignup
1

More than 5 years have passed since last update.

OpenapiGeneratorでtypescript-axiosで生成したコードをcreate-react-appで利用したら"Namespaces are not supported"とでた。

Posted at

利用環境

  • create-react-app
  • typescript
  • openapi-generatorでtypescript-axiosでクライアントの生成

状況

コンポーネント内にenumを書くとnamespaceを使ったコードが生成される

元ファイル

# chemicalcheck.yaml
hoge: 
  type: string
  enum: ["ok", "caution"]
  example: "ok"

生成

export namespace ChemicalCheck {
    /**
     * @export
     * @enum {string}
     */
    export enum Hoge {
        Ok = 'ok',
        Caution = 'caution'
    }
}

namespaceが使われてしまう。

これをcreate-react-app内で使うと、namespaceはもう使うな的な感じで怒られる。

参考
https://jser.info/2018/08/28/babel-7babeltypescript/

Babel 7ではTypeScriptのコードをパースできるようになり、@babel/preset-typescriptを利用してFlowと同じように型情報を取り除いてJavaScriptに変換できます。

制限として、Babel自体は型チェックを行なわないことやenum/namespaceのようなTypeScript独自の構文はサポートしてない点についても紹介されています。

解決法

yamlの書き方を治す方法がいいと思う。
refで参照させてしまえば、namespaceが生成されない

# chemicalcheck.yaml
hoge: 
  $ref: ./result.yaml
# result.yaml
type: string
enum: ["ok", "caution"]
example: "ok"

おすすめしない解決法

全置換

export namespace Hoge

export declare namespace Hoge

エラーは出なくなるけど、クライアント生成時に毎回書き換えるとかめんどくさい

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1