Чи є якийсь мінус у використанні .tsx замість .ts весь час у машинописі?

Я просто починаю працювати над проектом React з TypeScript і запитую себе, що мені робити з файлами звичайного класу? Чи повинен я використовувати .tsабо .tsxфайли, і тоді я не міг знайти жодної причини не використовувати .tsxфайл постійно, навіть якщо це не проект React!

Чи є якась причина чи конкретна ситуація, що ми не повинні використовувати .tsxфайли? якщо ні, то чому команда TypeScript додає нове розширення?

Ви можете використовувати tsxзамість tsдуже невеликої різниці. tsxОчевидно, дозволяє використовувати jsxтеги всередині typecript, але це вносить деякі неоднозначності розбору, які роблять 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тегів, кращий розробник Keep сюрприз до мінімуму.

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

Це своєрідна умова, яка використовується xв кінцевому підсумку, коли ваш JavaScript у JSX Harmonyрежимі. Тобто, коли це дійсно:

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

Однак розширення вашого файлу насправді не має значення, якщо попередні процесори знають про ваше рішення (перегляньте веб-пакет або веб-пакет). Я, наприклад, використовую .jsвсі свої JavaScript, навіть коли вони реагують. Те ж відноситься до машинопису, ts/tsx.

EDIT

Тепер я настійно рекомендую використовувати JSX для Javascript з синтаксисом React та TSX для TypeScript з React, оскільки більшість редакторів / IDE використовуватиме розширення, щоб увімкнути чи не синтаксис React. Також вважають його більш виразним.

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

TypeScript дотримується тієї ж конвенції, вводячи розширення .ts та .tsx. Практична відмінність полягає в тому, що .tsx не дозволяє <Type>твердження типів, оскільки синтаксис суперечить тегам JSX. as Typeтвердження були введені як заміна <Type>і вважали кращим вибором з міркувань послідовності як у .ts, так і .tsx. Якщо код у форматі .ts використовується у файлі .tsx, <Type>його потрібно буде виправити.

Використання розширення .tsx означає, що модуль пов'язаний з React та використовує синтаксис JSX. Якщо це не так, розширення може створити помилкове враження щодо вмісту модуля та його ролі в проекті, це аргумент проти використання .tsx розширення за замовчуванням.

З іншого боку, якщо файл пов'язаний з React і має хороші шанси вмістити JSX в якийсь момент, він може бути названий як .tsx з початку, щоб уникнути перейменування пізніше.

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

Я вважаю, що у файлах .tsx ви можете використовувати весь код JSX (JavaScript XML). Тоді як у файлі .ts ви можете використовувати лише тільки машинопис.

.tsфайли мають <AngleBracket>синтаксис твердження типу, який суперечить граматиці JSX. Щоб уникнути зриву людей, ми використовуємо .tsxдля JSX і додали foo as Barсинтаксис, який дозволений в обох .tsі .tsxфайлах.

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

А інший - синтаксис as:

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

Ми можемо використовувати .ts з, as-syntaxале <string>someValueце здорово!