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


利用環境


  • 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独自の構文はサポートしてない点についても紹介されています。


https://github.com/facebook/create-react-app/issues/5633


解決法

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

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