104
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【TypeScript】.ts拡張子と.tsx拡張子

Last updated at Posted at 2021-01-18

.ts拡張子と.tsx拡張子の違い

.ts拡張子

  • 純粋なTypeScriptファイル
  • JSX要素の追加をサポートしない

.tsx拡張子

  • JSXを含むファイル
  • 型アサーションの記法として value as type<type>value の2通りあるが、後者は .tsx には書けない
    <> はJSXタグのマーカーであるため)

Reactを使うプロジェクト内のTypeScriptファイルは全て.tsxではダメなのか

結論

  • .ts.tsx は明示的に分けるべき

理由

  • 拡張子で明示的にしておくことで、「このファイルにJSXを書くべきではない」ことを表すことができるため
    (UIコンポーネントのファイルか、ロジックを書くファイルか)
104
46
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
104
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?