スポンサーリンク

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

TypeScript
スポンサーリンク

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

スポンサーリンク

「tsx・ts」拡張子の違い

tsxファイル

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

tsファイル

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

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

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

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

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

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

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

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

TypeScript
スポンサーリンク
スポンサーリンク

コメント

タイトルとURLをコピーしました