web-dev-qa-db-ja.com

タイプスクリプトで常に.tsの代わりに.tsxを使用することに欠点はありますか？

TypeScriptを使用してリアクティブプロジェクトの作業を開始し、通常のクラスファイルで何をすべきかを自問します。 .tsまたは.tsxファイルを使用する必要がありますが、反応プロジェクトではない場合でも、.tsxファイルを常に使用しない理由は見つかりませんでした！ .tsxファイルを使用しない理由や特定の状況はありますか？ 「いいえ」の場合、TypeScriptチームはまったく新しい拡張機能を追加しますか？

javascriptreactjstypescript
69
Ostad

tsxの代わりにtsを使用しても、ほとんど違いはありません。 tsxは明らかにTypeScript内でjsxタグの使用を許可しますが、これによりtsxがわずかに異なる解析のあいまいさが導入されます。私の経験では、これらの違いはそれほど大きくありません。

<>を使用した型アサーションは、jsxタグのマーカーであるため機能しません。

TypeScriptには、型アサーション用の2つの構文があります。どちらもまったく同じことを行いますが、1つはtsxで使用でき、もう1つは使用できません。

let a: any;
let s = a as string // ok in tsx and ts
let s2 = <string>a // only valid in ts

一貫性を保つために、tsファイルでも<>の代わりにasを使用します。 asは、<>がtsxで使用可能でなかったため、TypeScriptで実際に導入されました。

制約のない一般的な矢印関数は正しく解析されません

以下の矢印関数は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;}

注

Tsの代わりにtsxを使用できますが、これに反対することをお勧めします。コンベンションは強力なものであり、人々はtsxをjsxに関連付けます。おそらくjsxタグがないことに驚かれることでしょう。開発者の驚きを最小限に抑えることをお勧めします。

上記のあいまいさ（おそらく完全なリストではありませんが）はそれほど大きくはありませんが、tsファイルの下位互換性を保つために、新しい構文に専用のファイル拡張子を使用するという決定におそらく大きな役割を果たしました。

61
Titian Cernicova-Dragomir

JavaScriptがJSX Harmonyモードにあるときに、最後にxを使用するのは一種の規則です。つまり、これが有効な場合：

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

ただし、プリプロセッサが決定（browserifyまたはwebpack）を認識している限り、ファイル拡張子は重要ではありません。 1つは、Reactであっても、すべてのJavaScriptに対して.jsを使用することです。 TypeScript、ts/tsxにも同じことが当てはまります。

51
André Pena

.jsx拡張子が導入された理由は、JSXがJS構文の拡張であり、したがって.jsxファイルに有効なJavaScriptが含まれていないためです。

TypeScriptは、.tsおよび.tsx拡張子を導入することで同じ規則に従います。実際の違いは、構文がJSXタグと競合するため、.tsxでは<Type>タイプのアサーションが許可されないことです。 as Typeアサーションは<Type>の代わりとして導入され、.tsと.tsxの両方で一貫性の理由から好ましい選択と見なされました。 .tsのコードが.tsxファイルで使用されている場合、<Type>を修正する必要があります。

.tsx拡張子の使用は、モジュールがReactに関連し、JSX構文を使用することを意味します。そうでない場合、拡張機能はモジュールの内容とプロジェクトでの役割について誤った印象を与える可能性があります。これは、デフォルトで.tsx拡張子を使用することの反対です。

一方、ファイルがReactに関連していて、ある時点でJSXを含む可能性が高い場合、後で名前を変更しないように、最初から.tsxとして名前を付けることができます。

たとえば、Reactコンポーネントと一緒に使用されるユーティリティ関数は、どの時点でもJSXに関係する可能性があるため、.tsx名を安全に使用できますが、 Reduxコード構造 はReactコンポーネントを直接使用し、Reactとは別に使用およびテストでき、.ts名を使用できます。

4
Estus Flask

.tsxファイルでは、すべてのJSX（JavaScript XML）コードを使用できると考えています。一方、.tsファイルでは、TypeScriptのみを使用できます。

3
theITvideos

.tsファイルには、JSX文法と競合する<AngleBracket>タイプのアサーション構文があります。たくさんの人が壊れないように、JSXには.tsxを使用し、foo as Barと.tsファイルの両方で許可される.tsx構文を追加しました。

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

もう1つは、構文どおりです。

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

as-syntaxで.tsを使用できますが、<string>someValueはクールです！

1
Arjun Kava