create-react-appでEXTEND_ESLINT = trueの場合のTypescript解析エラー
現在、create-react-appプロジェクトがあり、FlowからTypeScriptに段階的に移行しています。これは、いくつかの望ましくないESLintルールを無効にすることを意味しました。 ESLintをカスタマイズするために、EXTEND_ESLINT=trueを.envファイルに追加しました。
この設定を追加する前に、TypeScriptコードは正常にコンパイルされます。その後、特定の（すべてではない）TypeScript文法で解析エラーが発生します。
// Type guards
export function f0<T>(x: T|undefined): x is T { ...
// Constrained generics
export function f1<T extends number>(x: T) { ...
// Type assertions
... return x as T
私がまだ見つけていない他の認識されない構文があるかもしれません。
今のところ
同様の問題やバグレポートは見つかりませんでした。 TypeScriptの一部の機能（
const enumなど）は、現在のCRAバージョンでは使用できないことを理解していますが、上記の機能についての言及はありません。また、私の TypeScriptとESLintのバージョンは互換性がある とTypeScript-eslintを使用していると確信しています。さまざまな
.eslintrcの組み合わせを試しました。添付のリポジトリの.eslintrc.jsファイルに、最も有望なものをいくつか残しました。現在の設定は create-react-appで推奨 で、TypeScriptリンティングはoverridesセクションで設定されます。ESLint TypeScript構成は、
TypeScript-eslintmonorepo 、特にTypeScript-eslint/parserおよびTypeScript-eslint/eslint-pluginからの指示に従ってセットアップされました
ソリューション
イジェクトはオプションではありません。他の解決策が見つからない場合は、フロー-> TS変換を一度に実行するだけです。
現在、CRA構成を customize-cra で拡張しています。これを含むソリューションは大歓迎です。
私は
.eslintrcがもたらす柔軟性を楽しんでいますが、lintルールを設定できるのであれば、喜んでそれを排除できます。
注意事項
私はプロジェクトを正確に反映するために
customize-craをデモリポジトリに含めましたが、問題はcustomize-craがなくても持続し、原因ではない可能性が高いことを示しています。問題の構文の例については、
src/components/TestComponent/fn.tsを参照してください。私の現在の仮説は、CRA ESLint構成に
EXTEND_ESLINT=trueのときに引き継がれないいくつかの設定があるというものです。
更新
- create-react-appで問題を開いた
- 問題に記載されている部分的な回避策。まだ理想的ではありません。
この問題が発生した他の人には、原因と思われる CRAで未解決の問題 があります。