Reactを使うプロジェクト内のTypeScriptをすべて.tsxで作るデメリットについて

Question

TypeScript + React（JSX）のコードを書いていたのですが、うっかり拡張子が.tsのままJSXを書いてしまってトラブルとなることがありました。もちろん拡張子を.tsxとすれば解決はするのですが、JSXの有無に関わらず、最初から全ファイルを.tsxとしてしまって不都合なことはありますでしょうか。

全ファイルを.tsxで作った場合、「.tsはMPEG-2 TSと拡張子が衝突するけど.tsxはそうならない」「あとからJSXが必要になってもそのまま書け、ファイル名変更が不要」などのメリットが見込めます。

下に書いたように「<type>形式でのキャストができない」ということは承知ですが、それ以外に「.tsxファイルだとこんな不都合がある」ということがありましたら教えていただければと思います。

調べたこと

• Allow JSX without using .tsx extension - 逆に、.tsでもJSXを書けるようにしてはどうかという提案（クローズされています）
• キャストの記法としてvalue as typeと<type>valueの2通りがあって、後者は.tsxファイルには書けないこと

補足情報（FW/ツールのバージョンなど）

• TypeScript 3.7.5
• React 16.12
• Webpack 4.41.6
• Webpackへの読み込みにはts-loaderを使用（型チェックはfork-ts-checker-webpack-pluginに投げている）
• エディタはVisual Studio Codeを使用

Answer 1

システム的な不都合は思いつきません。しかし、私は全ファイルを .tsx で書くべきではないと思います。
理由は maisumakun さんがおっしゃっている

「あとからJSXが必要になってもそのまま書け、ファイル名変更が不要」

がメリットではなく、デメリットだと感じている点です。
拡張子で明示的にしておくことで、「このファイルに JSX を書くべきではない」ことを表すことができます。
私はこういった部分を曖昧にすることからバグは生まれると思っているので、.ts と .tsx は明示的に分けるべきだと思います。

.tsx にすることのデメリットというよりは、分けることのメリットになってしまいました。
求めている回答と違ったらすみません。

Comments

[hoshi-takanori]

賛成です。自分は .ts または .tsx のファイルを作る時、UI コンポーネントを作るのか、それ以外のロジックなどを作るのかということは最初に意識するし、途中で変えたくなることもないので。また、.ts ファイルに対しては UI を含まないという前提でテストを書いたりしますし。

[maisumakun]

「JSX自体をデータとして受け取って処理する関数」のようなものを立てる状況でなければ、JSXを書くファイルは限られますね。ありがとうございました。