По состоянию на 2019 год Tymdercript все более популярно, как язык программирования на выбор для веб-разработчиков. В этой серии Post мы узнаем, как компилятор TS обрабатывает JSX и как все это взаимодействует с самыми популярными каркасами, которые используют jsx: реагируют.
Первые вещи первыми – как работает JSX? Вот несколько примеров JSX:
// a native 'span' element with some text children const mySpan = Hello world! // a custom 'CustomSpan' element with some props and some children const myCustomSpan = (Hello world! ) // a native, self-closing 'input' element without any children const myInput = // a custom 'Container' element with multiple children const myWidget = (I am a widget )
JSX – это дополнение Syntax Non-Ecmascript для JavaScript, которое поддерживается TypeyScript через --jsx
Флаг компилятора. Если вы разработчик реагирования, то jsx на самом деле просто синтаксический сахар, который будет составлять до этого (если вы используете Typeycript Compiler):
// a native 'span' element with some text children const mySpan = React.createElement('span', null, 'Hello world!') // a custom 'CustomSpan' element with some props and some children const myCustomSpan = React.createElement( CustomSpan, { key: 'myspan', bold: true, color: 'red' }, 'Hello world!' ) // a native, self-closing 'input' element without any children const myInput = React.createElement('input', null) // a custom 'Container' element with multiple children const myWidget = React.createElement( Container, { onClick: console.log }, 'I am a widget', React.createElement(Button, null, 'Click me!') )
Это уже довольно много для рассечения; Отметим некоторые интересные вещи в этом преобразовании:
- Весь Jsx выражение превращается в звонок против функции под названием
Rect.Createelement
Отказ Это на самом деле, почему вам всегда нужноИмпорт реагирует с «Реагирование»
Если вы используете JSX, даже если переменнаяРеагировать
На самом деле никогда не используется в вашем коде! Тег Имя в экспрессии JSX перемещается к первому параметру вызова функции.
- Если имя тега начинается с заглавного символа, или (не отображается в примере), это свой свой свой свой свой свой свой свойство (например
), он оставлен как есть. - Если имя тега – это одно строчное слово, он превращается в строковый литерал (
вход -> «ввод»
)
- Если имя тега начинается с заглавного символа, или (не отображается в примере), это свой свой свой свой свой свой свой свойство (например
Все реквизиты (или атрибуты , поскольку они называются в абстрактном синтаксическом дереве), преобразуются в объект, который перемещается ко второму параметру вызова функции, с некоторым специальным синтаксисом для примечания:
- Если никакие опоры не передаются, значение не является пустым объектом, ни
undefined
, но простоnull
Отказ - Синтаксис атрибута сокращения (например,
жирный
PROP вMyinput
) превращается в просто имущество objet со значениемправда
Отказ - Несмотря на то, что реагировать лечить
ключ
иRef
Как особенное, они все еще (насколько связаны синтаксис) регулярные атрибуты в преобразовании. - Порядок свойств объекта – это тот же порядок, который они отображаются как атрибуты в выражении JSX.
- Если никакие опоры не передаются, значение не является пустым объектом, ни
Дети преобразуются при необходимости (если они также являются jsx) и помещаются в приказ, что они появляются, как остальные аргументы на вызов функции.
- Реагирование имеет определенное поведение, где один ребенок в JSX появляется как только этот узел в
ropps.bildren
, но как массив узлов для нескольких детей. Это не применяется синтаксисом или спецификацией вообще. На самом деле, Preact всегда будет обернуть детей в массиве независимо от того, сколько существует, так что эта часть – это деталь внедрения.
- Реагирование имеет определенное поведение, где один ребенок в JSX появляется как только этот узел в
Это действительно все, что есть к синтаксису JSX; В конце дня это просто синтаксический сахар для создания вложенных функций, не причиняя боль в мозгу.
Почему это тогда, компилятор знает использовать Отреагировать
как функция вместо чего-то другого? Оказывается, вы можете изменить это на все, что вы хотите! Все, что вам нужно сделать, это добавить либо комментарий в верхней части вашего файла или установить флаг компилятора:
/* @jsx myCustomJsxFactory.produce */ // your code here
// tsconfig.json { "compilerOptions": { "jsxFactory": "myCustomJsxFactory.produce" } }
Они делают то же самое, и это просто получается, что значение по умолчанию является Отреагировать
.
На следующих постах в серии мы будем изучать, насколько Typearcts знает, как TypeCheck против синтаксиса JSX через рабочий пример построения нашей собственной заводской функции JSX.
Оригинал: “https://dev.to/ferdaber/typescript-and-jsx-part-i—what-is-jsx-3g8b”