Три режима JSX TS

внешний интерфейс JavaScript TypeScript
Три режима JSX TS

предисловие

Мы много говорили оTSЗнание основных типов, интерфейсов, типов, обобщений, перечислений, вывода типов и совместимости, модулей и пространств имен, разрешения модулей и слияния объявлений.

То, о чем мы говорим сегодня, по-прежнемуTSСвязанный,TSтри изJSXмодель

текст

Начнем с того, что естьJSXдавай поговорим

JSXНа самом деле этоJSграмматическое расширение, потому чтоReactФреймворк стал известен. существуетReact, компоненты, написанные на JSX, а затем проанализированные препроцессором babel, а затем переданные React для рендеринга в указанный родительский контейнер, чтобы сформировать окончательную html-страницу для анализа и отображения браузером.

Однако,JSXнетReactчто-то эксклюзивное

TSПоддержка встраивания, проверки типов и компиляции JSX непосредственно вJS

ноTSдля использования вJSXНеобходимо сделать две вещи:

  1. дать файл.tsxимя расширения
  2. включитьjsxОпции

Давайте поговорим о сегодняшней теме первым.TSтриJSXмодель

Три режима JSX TS

TSИмеет три режима JSX:preserve,reactа такжеreact-native

Эти шаблоны работают только во время фазы генерации кода, проверка типа не затронута

режим сохранения

существуетpreserveJSX сохраняется в сгенерированном коде в режиме для последующих операций преобразования.

Выходной файл будет иметь.jsxимя расширения

режим реакции

reactРежим генерируетReact.createElement, Перед использованием операции преобразования не далее

Расширение выходного файла.js

реактивный режим

react-nativeэквивалентноpreserve, он также сохраняет все JSX, но расширение выходного файла.js

указанный режим

можно использовать в командной строке с помощью--jsxотметьте илиtsconfig.jsonпараметры, чтобы указать режим

Уведомление

нужно внимание, потому чтоTSУгловые скобки также используются для обозначения утверждений типа, что в сочетании с синтаксисом JSX вызовет трудности при синтаксическом анализе. следовательно,TSсуществует.tsxУтверждения типа с использованием угловых скобок отключены в файле

Вместо этого вы можете использовать оператор as,asоператор в.tsа также.tsxдоступны в обоих и эквивалентны поведению утверждения типа угловой скобки

Например:

var foo = bar as foo;

END

Выше приведено все содержание этой статьи.Если у вас есть какие-либо вопросы, пожалуйста, поправьте меня~