使用 React 和 .tsx 在项目中制作所有 TypeScript 的缺点

Question

I was writing TypeScript + React (JSX) code, but sometimes I accidentally wrote JSX with the extension of .ts and got into trouble. Of course, if the extension is set to .tsx , the solution will be resolved, but is there any inconvenience if all files are set to .tsx from the beginning regardless of the presence or absence of JSX?

If all files are made with .tsx,

" .ts has an extension conflict with MPEG-2 TS, but .tsx does not."

"Even if you need JSX later, you can write as it is, no need to change the file name."

Advantages such as can be expected.

I know that

Cannot cast format.

but besides that I hope you can tell me if there is something like that.

A .tsx file has such inconveniences.

What I checked

• Allow JSX without using .tsx extension - Conversely, suggest that you can write JSX in .ts (closed)

• There are two types of cast notation: value as type and <type> value , and the latter cannot be written in a .tsx file

Environment

• TypeScript 3.7.5
• React 16.12
• Webpack 4.41.6 Use ts-loader to load to Webpack (type check is thrown to fork-ts-checker-webpack-plugin )
• Editor uses Visual Studio Code

Answer 1

There is no significant drawback to using .tsx everywhere.

The only thing you can't do in .tsx files is a small syntax difference.

You can't use <foo> to cast.

For example, instead of:

<any>foo

you must write:

 foo as any

If you use the first syntax in a .tsx file it will be obvious and easy to correct.