【TypeScript】Reactプロジェクト内での「tsx・ts」拡張子の違いと使い分けご紹介。

今回の記事はTypeScriptベースのReactプロジェクトで注意したいファイル拡張子に関して紹介する記事です。「tsx・ts」ファイル拡張子には明確な使い分けがあるのでどちらを使うべきか迷っている方は是非参考にしてみてください。

「tsx・ts」拡張子の違い

tsxファイル

JSXを含むファイル。つまりコンポーネントなどを記述するファイルとして使用します。

tsファイル

JSXを含まない純粋なTypeScriptファイル。

実はこの二つを間違えるとしっかりエラーになりますので注意してください。

では実際どのように使い分けるかをご紹介していきます。

Reactプロジェクト内での「tsx・ts」拡張子の使い分け

基本的には下記で良いのではないでしょうか。

「tsx」ファイルにはJSXを含むコンポーネント系を記述。型などを記述するファイルやUtilityなどが属する純粋なTypeScriptの処理のみのファイルは「ts」を用いる。

では今回の記事は以上です。他にも多数のTypeScript・React関連記事を記載しているので是非サイト内みていってください。