Gibt es einen Nachteil bei der Verwendung von .tsx anstelle von .ts die ganze Zeit in Typoskript?

Ich fange gerade an, mit TypeScript an einem React-Projekt zu arbeiten, und frage mich, was ich mit normalen Klassendateien machen soll? Sollte ich es benutzen .ts oder .tsx Dateien und dann konnte ich keinen Grund finden, sie nicht zu verwenden .tsx -Datei, auch wenn es sich nicht um ein React-Projekt handelt!

Gibt es einen Grund oder eine bestimmte Situation, die wir nicht verwenden sollten? .tsx Dateien? Wenn nein, warum fügt das TypeScript-Team eine ganz neue Erweiterung hinzu?

Sie können verwenden tsx Anstatt von ts mit sehr wenig unterschied. tsx erlaubt offensichtlich die Verwendung von jsx -Tags in TypeScript, aber dies führt zu einigen Parsing-Mehrdeutigkeiten, die tsx etwas anders machen. Nach meiner Erfahrung sind diese Unterschiede nicht sehr groß:

Geben Sie Behauptungen mit ein <> funktionieren nicht, da dies der Marker für ein jsx-Tag ist.

TypeScript hat zwei Syntaxen für Typzusicherungen. Beide machen genau dasselbe, aber einer ist in tsx verwendbar, der andere nicht:

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

ich würde … benutzen as Anstatt von <> in ts Dateien sowie für Konsistenz. as wurde eigentlich in TypeScript eingeführt, weil <> war nicht verwendbar in tsx.

Generische Pfeilfunktionen ohne Einschränkung werden nicht korrekt analysiert

Die Pfeilfunktion unten ist in Ordnung ts aber ein Fehler drin tsx wie <T> wird als Beginn eines Tags in interpretiert tsx:

 const fn = <T>(a: T) => a

Sie können dies umgehen, indem Sie entweder eine Einschränkung hinzufügen oder keine Pfeilfunktion verwenden:

 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;}

Notiz

Während Sie verwenden können tsx Anstatt von ts, würde ich davon abraten. Konvention ist eine mächtige Sache, Leute assoziieren tsx mit jsx und werden wahrscheinlich überrascht sein, dass Sie keine haben jsx Tags, halten Sie die Überraschung der Entwickler am besten auf einem Minimum.

Während die obigen Mehrdeutigkeiten (obwohl wahrscheinlich keine vollständige Liste) nicht groß sind, spielten sie wahrscheinlich eine große Rolle bei der Entscheidung, eine dedizierte Dateierweiterung für die neue Syntax zu verwenden, um sie beizubehalten ts Dateien abwärtskompatibel.

Es ist eine Art Konvention zu verwenden x am Ende, wenn Ihr JavaScript drin ist JSX Harmony Modus. Das heißt, wenn dies gültig ist:

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

Ihre Dateierweiterung spielt jedoch keine Rolle, solange Ihre Präprozessoren Ihre Entscheidung (browserify oder webpack) kennen. Ich für meinen Teil benutze .js für all mein JavaScript, auch wenn es React ist. Gleiches gilt für TypeScript, ts/tsx.

BEARBEITEN

Jetzt würde ich dringend empfehlen, JSX für Javascript mit React-Syntax und TSX für TypeScript mit React zu verwenden, da die meisten Editoren/IDEs die Erweiterung verwenden, um die React-Syntax zu aktivieren oder nicht. Es wird auch als ausdrucksstärker angesehen.

Der Grund für die Einführung der .jsx-Erweiterung ist, dass JSX eine Erweiterung der JS-Syntax ist und .jsx-Dateien daher kein gültiges JavaScript enthalten.

TypeScript folgt der gleichen Konvention, indem es die Erweiterungen .ts und .tsx einführt. Ein praktischer Unterschied besteht darin, dass .tsx nicht zulässig ist <Type> geben Sie Assertionen ein, da die Syntax mit JSX-Tags in Konflikt steht. as Type Behauptungen wurde als Ersatz für eingeführt <Type> und wurde aus Konsistenzgründen sowohl in .ts als auch in .tsx als bevorzugte Wahl angesehen. Falls der Code aus .ts in einer .tsx-Datei verwendet wird, <Type> muss behoben werden.

Die Verwendung der Erweiterung .tsx impliziert, dass ein Modul mit React verwandt ist und die JSX-Syntax verwendet. Falls dies nicht der Fall ist, kann die Erweiterung einen falschen Eindruck über den Modulinhalt und die Rolle im Projekt vermitteln. Dies ist das Argument gegen die standardmäßige Verwendung der Erweiterung .tsx.

Wenn eine Datei dagegen mit React verwandt ist und gute Chancen hat, irgendwann JSX zu enthalten, kann sie von Anfang an als .tsx bezeichnet werden, um spätere Umbenennungen zu vermeiden.

Beispielsweise können Dienstprogrammfunktionen, die zusammen mit React-Komponenten verwendet werden, JSX an jedem Punkt einbeziehen und können daher sicher .tsx-Namen verwenden Struktur des Redux-Codes soll React-Komponenten nicht direkt verwenden, kann unabhängig von React verwendet und getestet werden und kann .ts-Namen verwenden.

Ich glaube, mit den .tsx-Dateien könnten Sie den gesamten JSX-Code (JavaScript XML) verwenden. Während Sie in der .ts-Datei nur Typoskript verwenden können.

.ts Dateien haben eine <AngleBracket> Type-Assertion-Syntax, die mit der JSX-Grammatik in Konflikt steht. Um zu vermeiden, dass eine Menge Leute kaputt gehen, verwenden wir .tsx für JSX und fügte die foo as Bar Syntax, die in beiden erlaubt ist .ts und .tsx Dateien.

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

Und das andere ist die as-Syntax:

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

Wir können .ts mit verwenden as-syntax aber <string>someValue ist geil!