Рубрики
Без рубрики

Typeycript и JSX Часть I – Что такое JSX?

Объяснение того, как Sypercript Compiler работает с JSX. Помечено с помощью Teadercript, JSX, Rect, JavaScript.

По состоянию на 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 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”