.ts 和 .tsx 扩展名之间有什么区别。两者都用作 react 中打字稿文件的扩展名。那么我们应该在哪里使用它们呢？

Question

我是新来的，我正在做一个项目。我遇到了.ts和.tsx扩展。我不明白我应该在哪里使用.tsand .tsx。非常感谢您对此的任何帮助。谢谢！

Answer 1

使用.ts纯打字稿文件。

使用.tsx了含有JSX文件。

例如，一个 React 组件应该是.tsx，但是一个包含辅助函数的文件应该是.ts.

我花了很多时间来弄清楚为什么我的 .ts 文件不断抛出“return <div>hello!</div>;”之类的错误。杀了我算了。 (8认同)
要添加到这个（正确的）答案，就像你在没有 TypeScript 的情况下进行 React 一样，你可以使用 .js 和 .jsx 来表示纯 javascript 与 JSX javascript 文件。 (3认同)
不一定，你可以编写纯 TS React 组件，我将其改写为：包含“类似标签”react 语法的 React 组件（实际上是 tsx）。只是为了向那些不太了解这一点的人澄清这一点。 (2认同)
完美的答案！ (2认同)

Answer 2

以上所有答案都是正确的。

.ts 文件仅包含纯 TypeScript

.tsx 也包含 JSX。

从另一个角度来看，您可以复制.ts文件中的所有内容并粘贴到.tsx文件上，并且不需要修改任何内容。但如果您从.tsx文件中复制，则需要通过删除JSX元素来重构它。

Answer 3

当我们想在文件中嵌入 JSX 元素时使用 .tsx 扩展名，而 .ts 用于纯 Typescript 文件并且不支持添加 JSX 元素。

Answer 4

.ts 文件是纯打字稿，而 .tsx 是打字稿的扩展语法格式，它将打字稿和 HTML 结合在同一个文件中。例如：

const element = <h1>Hello, world!</h1>;

这是有益的，因为我们可以开始直接在代码中定义输出，并且更容易合并数据，使 HTML 类似于模板：

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>; // Outputs <h1>Hello, Josh Perez</h1>

Answer 5

当您使用 .tsx 时，您可以在该特定文件中使用 JSX，而 .ts 会给您错误。