javascript - ¿Hay alguna desventaja en usar .tsx en lugar de .ts todo el tiempo en TypeScript?

Acabo de comenzar a trabajar en un proyecto de React con TypeScript y me pregunto qué debería hacer con los archivos de clase normales. ¿Debería usar archivos .ts o .tsx y luego no pude encontrar ninguna razón para no usar archivos .tsx todo el tiempo, incluso cuando no es un proyecto de React!

¿Hay alguna razón o situación específica por la que no deberíamos usar archivos .tsx? Si no, ¿por qué el equipo de TypeScript agregó una extensión completamente nueva?

Respuesta #1

Puedes usar tsx en lugar de ts con muy poca diferencia. tsx obviamente permite el uso de etiquetas jsx dentro de TypeScript, pero esto introduce algunas ambigüedades de análisis que hacen que tsx sea ligeramente diferente. En mi experiencia, estas diferencias no son muy grandes:

Las aserciones de tipo con <> no funcionan ya que ese es el marcador para una etiqueta jsx.

TypeScript tiene dos sintaxis para las aserciones de tipo. Ambas hacen exactamente lo mismo, pero una se puede usar en tsx y la otra no:

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

También usaría as en lugar de <> en archivos ts por consistencia. De hecho, as se introdujo en TypeScript porque <> no era usable en tsx.

Las funciones flecha genéricas sin restricción no se analizan correctamente

La función flecha a continuación está bien en ts pero da un error en tsx ya que <T> se interpreta como el inicio de una etiqueta en tsx:

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

Puedes solucionar esto ya sea añadiendo una restricción o no usando una función flecha:

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

Nota

Aunque puedes usar tsx en lugar de ts, recomendaría no hacerlo. La convención es algo poderoso, la gente asocia tsx con jsx y probablemente se sorprenderá de que no tengas ninguna etiqueta jsx, es mejor mantener la sorpresa del desarrollador al mínimo.

Aunque las ambigüedades anteriores (aunque probablemente no sea una lista completa) no son grandes, probablemente jugaron un papel importante en la decisión de usar una extensión de archivo dedicada para la nueva sintaxis con el fin de mantener los archivos ts compatibles con versiones anteriores.

Respuesta #2

Es una especie de convención usar x al final cuando tu JavaScript está en modo JSX Harmony. Es decir, cuando esto es válido:

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

Sin embargo, la extensión de tu archivo realmente no importa, siempre y cuando tus preprocesadores estén al tanto de tu decisión (browserify o webpack). Yo, por mi parte, uso .js para todo mi JavaScript, incluso cuando es React. Lo mismo se aplica para TypeScript, ts/tsx.

EDITAR

Ahora, recomendaría encarecidamente usar JSX para JavaScript con sintaxis de React y TSX para TypeScript con React porque la mayoría de los editores/IDE usarán la extensión para habilitar o no la sintaxis de React. También se considera que es más expresivo.