.ts拡張子と.tsx拡張子の違い
.ts拡張子
- 純粋なTypeScriptファイル
- JSX要素の追加をサポートしない
.tsx拡張子
- JSXを含むファイル
- 型アサーションの記法として
value as typeと<type>valueの2通りあるが、後者は.tsxには書けない
(<>はJSXタグのマーカーであるため)
Reactを使うプロジェクト内のTypeScriptファイルは全て.tsxではダメなのか
結論
-
.tsと.tsxは明示的に分けるべき
理由
- 拡張子で明示的にしておくことで、「このファイルにJSXを書くべきではない」ことを表すことができるため
(UIコンポーネントのファイルか、ロジックを書くファイルか)