在打字稿中一直使用 .tsx 而不是 .ts 有什么缺點嗎？

Question

我剛剛開始使用 TypeScript 處理一個 React 項目，並問自己應該如何處理常規類文件？ 我應該使用.ts還是.tsx文件，然后我找不到任何理由不使用.tsx文件，即使它不是 React 項目！

是否有任何原因或特定情況我們不應該使用.tsx文件？ 如果不是，為什么 TypeScript 團隊要添加全新的擴展？

Answer 1

您可以使用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 ，可能會驚訝於你沒有任何jsx標簽，最好將開發人員的驚喜降到最低。

雖然上面的歧義（雖然可能不是完整列表）並不大，但它們可能在決定為新語法使用專用文件擴展名以保持ts文件向后兼容的過程中發揮了重要作用。

Answer 2

當您的 JavaScript 處於JSX Harmony模式時，最后使用x是一種約定。 也就是說，當它有效時：

doSomething(<div>My div</div>);

然而，你的文件擴展名並不重要，只要你的預處理器知道你的決定（瀏覽器或 webpack）。 一方面，我將.js用於我所有的 JavaScript，即使它們是 React。 這同樣適用於 TypeScript, ts/tsx 。

編輯

現在，我強烈建議對帶有 React 語法的 Javascript 使用 JSX，對帶有 React 的 TypeScript 使用 TSX，因為大多數編輯器/IDE 將使用擴展來啟用或不啟用 React 語法。 它也被認為更具表現力。

Answer 3

引入 .jsx 擴展名的原因是 JSX 是 JS 語法的擴展，因此 .jsx 文件不包含有效的 JavaScript。

TypeScript 通過引入 .ts 和 .tsx 擴展遵循相同的約定。 一個實際的區別是 .tsx 不允許<Type>類型斷言，因為語法與 JSX 標簽沖突。 as Type斷言被引入作為<Type>的替代品，並被認為是 .ts 和 .tsx 中一致性原因的首選。 如果 .ts 中的代碼用於 .tsx 文件，則需要修復<Type> 。

.tsx 擴展名的使用意味着模塊與 React 相關並使用 JSX 語法。 如果沒有，擴展可能會給模塊內容和項目中的角色留下錯誤的印象，這是默認情況下反對使用 .tsx 擴展的論據。

另一方面，如果一個文件與 React 相關並且在某個時候很可能包含 JSX，則可以從一開始就將其命名為 .tsx 以避免以后重命名。

例如，與 React 組件一起使用的實用程序函數可能在任何時候都涉及 JSX，因此可以安全地使用 .tsx 名稱，而Redux 代碼結構不應該直接使用 React 組件，可以與 React 分開使用和測試並且可以使用 .ts 名稱。

Answer 4

我相信對於 .tsx 文件，您可以使用所有 JSX（JavaScript XML）代碼。 而在 .ts 文件中，您只能使用打字稿。

Answer 5

.ts文件具有與 JSX 語法沖突的<AngleBracket>類型斷言語法。 為了避免破壞很多人，我們使用.tsx來表示 JSX，並添加了foo as Bar語法，這在.ts和.tsx文件中都是允許的。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

另一個是 as 語法：

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

我們可以將 .ts 與as-syntax一起使用，但是<string>someValue很酷！