利用環境
- 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
エラーは出なくなるけど、クライアント生成時に毎回書き換えるとかめんどくさい