Sie können tsx
statt ts
mit sehr geringem Unterschied verwenden. tsx
erlaubt natürlich die Verwendung von jsx
Tags innerhalb von Typoskript, aber dies führt zu einigen Mehrdeutigkeiten beim Parsen, die tsx etwas anders machen. Nach meiner Erfahrung sind diese Unterschiede nicht sehr groß:
<>
Typzusicherungen mit funktionieren nicht, da dies die Markierung für ein jsx-Tag ist.
Typescript verfügt über zwei Syntaxen für Typzusicherungen. Beide machen genau das Gleiche, 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 verwenden , as
anstatt <>
in ts
der Konsistenz als auch Dateien. as
wurde tatsächlich in Typescript eingeführt, weil <>
es in nicht verwendbar wartsx
Generische Pfeilfunktionen ohne Einschränkung werden nicht korrekt analysiert
Die Pfeilfunktion unten ist in Ordnung, ts
aber ein Fehler in tsx
as <T>
wird als Beginn eines Tags in interpretierttsx
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;}
Hinweis
Während Sie tsx anstelle von ts verwenden können, würde ich dagegen empfehlen. Übereinkommen ist ein mächtiges Ding, assoziieren Menschen tsx
mit jsx
und werden wahrscheinlich überrascht sein , Sie haben noch keine jsx
Tags, am besten keep Entwickler Überraschung auf ein Minimum.
Obwohl die oben genannten Unklarheiten (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 ts
Dateien abwärtskompatibel zu halten .
(
bei dem ein JSX-Tag nicht angezeigt werden kann, sodass keine Mehrdeutigkeit besteht.Es ist eine Art Konvention, die Sie
x
am Ende verwenden müssen, wenn sich Ihr JavaScript imJSX Harmony
Modus befindet. Das heißt, wenn dies gültig ist:Ihre Dateierweiterung spielt jedoch keine Rolle, solange Ihre Vorprozessoren über Ihre Entscheidung informiert sind (browserify oder webpack). Zum einen verwende ich
.js
für alle meine JavaScript, auch wenn sie reagieren. 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.
quelle
ts
undtsx
. In TypeScript aktiviert der Compiler nur die JSX-Syntax in.tsx
Dateien, da die Syntax eine gewisse Mehrdeutigkeit mit der TS-Syntax (z. B. der<>
Assertionssyntax) erzeugt. Um dies zu lösen, trifft der Compiler in einertsx
Datei andere Annahmen als in einerts
Datei. Siehe die Antwort von Tizian Cernicova-Dragomir.Der Grund für die Einführung der Erweiterung .jsx ist, dass JSX eine Erweiterung der JS-Syntax ist und daher .jsx-Dateien 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 keine Typzusicherungen zulässt
<Type>
, da die Syntax mit JSX-Tags in Konflikt steht.as Type
Behauptungen wurden als Ersatz für<Type>
und wurden aus Konsistenzgründen sowohl in .ts als auch in .tsx als bevorzugte Wahl eingeführt. Falls der Code aus .ts in der .tsx-Datei verwendet<Type>
wird, muss er behoben werden.Die Verwendung der Erweiterung .tsx impliziert, dass ein Modul mit React zusammenhängt 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 jedoch mit React zusammenhängt und gute Chancen hat, irgendwann JSX zu enthalten, kann sie von Anfang an als .tsx bezeichnet werden, um ein späteres Umbenennen zu vermeiden.
Zum Beispiel können Dienstprogrammfunktionen, die zusammen mit React-Komponenten verwendet werden, JSX an jedem Punkt einbeziehen und somit sicher .tsx-Namen verwenden, während die Redux- Codestruktur React-Komponenten nicht direkt verwenden soll, sondern außer React verwendet und getestet werden kann und kann .ts Namen verwenden.
quelle
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.
quelle
.ts
Dateien haben eine<AngleBracket>
Typzusicherungssyntax, die mit der JSX-Grammatik in Konflikt steht. Um zu vermeiden, dass eine Menge Leute.tsx
kaputt gehen , verwenden wir JSX und fügen diefoo as Bar
Syntax hinzu, die sowohl in.ts
als auch in.tsx
Dateien zulässig ist .Und das andere ist die As-Syntax:
Wir können .ts mit verwenden
as-syntax
,<string>someValue
ist aber cool!quelle