Есть ли недостаток в использовании .tsx вместо .ts все время в typescript?

Ответ 1

Это своего рода соглашение использовать x в конце, когда ваш JavaScript находится в режиме JSX Harmony. То есть, когда это действительно:

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

Тем не менее, расширение вашего файла на самом деле не имеет значения, если ваши препроцессоры знают о вашем решении (browserify или webpack). Я, например, использую .js для всех моих JavaScript, даже когда они React. То же самое относится и к TypeScript, ts/tsx.

Ответ 2

Вы можете использовать tsx вместо ts с очень небольшой разницей. tsx, очевидно, позволяет использовать 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

Я хотел бы использовать в as вместо <> в TS файлов, а также для обеспечения согласованности. 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 тегов, лучше держать разработчик сюрприза к минимуму.

Хотя приведенные выше неоднозначности (хотя, вероятно, и не полный список) невелики, они, вероятно, сыграли большую роль в решении использовать выделенное расширение файла для нового синтаксиса, чтобы обеспечить обратную совместимость файлов ts.

Ответ 3

Причина, по которой было введено расширение .jsx, заключается в том, что JSX является расширением синтаксиса JS и, следовательно, файлы .jsx не содержат допустимого JavaScript.

TypeScript следует тому же соглашению, вводя расширения .ts и .tsx. Практическое отличие состоит в том, что .tsx не допускает утверждения типа <Type> поскольку синтаксис конфликтует с тегами JSX. as Type Утверждения as Type были введены в качестве замены для <Type> и считались предпочтительным выбором по причинам согласованности как в .ts, так и в .tsx. Если код из .ts используется в файле .tsx, <Type> необходимо исправить.

Использование расширения .tsx подразумевает, что модуль связан с React и использует синтаксис JSX. Если это не так, расширение может дать ложное представление о содержимом модуля и роли в проекте, это аргумент против использования расширения .tsx по умолчанию.

С другой стороны, если файл связан с React и имеет хорошие шансы в какой-то момент содержать JSX, его можно с самого начала именовать как .tsx, чтобы избежать переименования позже.

Например, служебные функции, которые используются вместе с компонентами React, могут включать JSX в любой точке и, таким образом, могут безопасно использовать имена .tsx, в то время как структура кода Redux не предполагает непосредственного использования компонентов React, может использоваться и тестироваться отдельно от React. и может использовать имена .ts.

Ответ 4

Я считаю, что с файлами .tsx вы можете использовать весь код JSX (JavaScript XML). В то время как в файле .ts вы можете использовать только машинопись.

Ответ 5

Файлы .ts имеют синтаксис утверждения типа <AngleBracket> который конфликтует с грамматикой JSX. Чтобы не ломать .tsx людей, мы используем .tsx для JSX и добавили синтаксис foo as Bar который разрешен в .ts и .tsx.

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

И другой, как-синтаксис:

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

Мы можем использовать .ts с as-syntax но <string>someValue - это круто!