我刚刚开始使用 TypeScript 的 React 项目，并问自己应该如何处理常规类文件？我应该使用.ts或.tsx文件，然后我找不到任何理由不使用.tsx文件所有的时间，即使它不是一个 React 项目！
是否有任何原因或具体情况，我们不应该使用.tsx文件？如果没有，为什么 TypeScript 团队添加全新的扩展？
271
您可以使用tsx而不是ts，差异很小。tsx显然允许在 TypeScript 中使用jsx标签，但这会引入一些解析歧义，使 tsx 略有不同。根据我的经验，这些差异不是很大：
带有<>的类型断言不起作用，因为它是 jsx 标记的标记。
TypeScript 有两种类型断言的语法。它们都做完全相同的事情，但一个在 tsx 中可用，另一个不是：
let a: any;
let s = a as string // ok in tsx and ts
let s2 = <string>a // only valid in ts
为了保持一致性，在ts文件中使用as而不是<>。as实际上是在 TypeScript 中引入的，因为<>在tsx中不可用。
没有约束的通用箭头函数未正确解析
下面的箭头函数在ts中是可以的，但是tsx中的错误<T>被解释为tsx中标签的开始：
const fn = <T>(a: T) => a
您可以通过添加约束或不使用箭头函数来解决此问题：
const fn = <T extends any>(a: T) => a
const fn = <T,>(a: T) => a // this also works but looks weird IMO
const fn = function<T>(a: T) { return a;}
虽然您可以使用tsx而不是ts，但我建议不要这样做。惯例是一个强大的东西，人们将tsx与jsx相关联，并且可能会惊讶您没有任何jsx标签，最好将开发人员的惊喜降至最低。
虽然上面的歧义（虽然可能不是一个完整的列表）并不大，但它们可能在决定为新语法使用专用文件扩展名以保持ts文件向后兼容。
68
当您的 JavaScript 处于JSX Harmony模式时，最终使用x是一种惯例。
doSomething(<div>My div</div>);
但是，只要您的预处理器知道您的决定（browserify 或 webpack），您的文件扩展名并不重要。例如，我对所有 JavaScript 使用.js，即使它们是 React。同样适用于 TypeScript，ts/tsx。
现在，我强烈建议使用 JSX for Javascript with React 语法和 TSX for TypeScript with React，因为大多数编辑器 / IDE 将使用扩展来启用或不启用 React 语法。它也被认为更具表现力。
9
引入.jsx 扩展名的原因是 JSX 是 JS 语法的扩展，因此.jsx 文件不包含有效的 JavaScript。
TypeScript 通过引入.ts 和.tsx 扩展遵循相同的约定。实际的区别是.tsx 不允许<Type>类型断言，因为语法与 JSX 标记冲突。as Type断言是作为<Type>的替换引入的，并且由于一致性原因，它被认为是.ts 和.tsx>中的首选。
.tsx 扩展的使用意味着一个模块与 React 相关并使用 JSX 语法。如果没有，扩展可能会对模块内容和项目中的角色产生错误的印象，这是默认情况下反对使用.tsx 扩展的参数。
另一方面，如果文件与 React 相关，并且在某个时候很有可能包含 JSX，则可以从一开始就将其命名为.tsx，以避免以后重命名。
例如，与 React 组件一起使用的实用程序函数可能在任何时候都涉及 JSX，因此可以安全地使用.tsx 名称，而Redux code structure不应该直接使用 React 组件，可以在 React 之外使用和测试，并且可以使用.ts 名称。
8
我相信使用.tsx 文件可以使用所有 JSX（JavaScript XML）代码。而在.ts 文件中，您只能使用 typescript。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（56条）