Использование JSX в TypeScript без React
Каков простой способ заставить TypeScript распознавать JSX (особенно в VS Code) без использования React в качестве зависимости? Если нам нужно использовать настраиваемое пространство имен JSX и настраиваемое средство визуализации, то какова ожидаемая форма содержимого этого пространства имен и средства визуализации?
Насколько мне известно, JSX - это просто синтаксический сахар, который преобразуется в вызовы функций (например, React.createElement), поэтому должен быть способ указать, что для преобразования JSX следует использовать другую функцию.
Глядя на выпуск документации для TypeScript 2.8, я вижу, что есть разделы с названиями "Пофайловые фабрики JSX" и "Пространства имен JSX с локальной областью видимости", но я не вижу этих разделов в официальных текущих документах TypeScript. Эти функции устарели?
@ Berr'ita: Это не дубликат. Я специально указал, что хочу использовать TypeScript в VSCode (чтобы сохранить функции intellisense). Другой вопрос касается плагинов babel и сторонних пакетов, которые мне не нужны.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Компилятор Typescript имеет флаги, которые позволяют указать, как обрабатывается TSX / JSX.
В частности, вы должны указать «--jsx = React» и «--jsxFactory = someModule.yourJsxFactory», а в ваших файлах tsx вы предоставляете свою настраиваемую фабрику, импортируя «someModule», из которого следует экспортировать «yourJsxFactory».
Подробнее об этом на
.
Машинопись (параметры компилятора)
и
Машинопись (JSX)
@Kaldestad: Я прочитал эти документы, и у меня все еще есть конкретные вопросы. Если вы можете дать конкретный ответ на мои вопросы, я буду признателен
@prmph Немного странно, что вам нужно указать "--jsx = React", когда вы специально хотите, чтобы jsx обрабатывался НЕ React, но именно так cookie рушится
@prmph Сейчас я добавил некоторые уточнения к своему ответу
@ Kaldestad: Да, бит "jsx:" реагировать " сбивает с толку. Кроме того, это больше, чем объясняется в документации. Например, какова ожидаемая форма типов JSX.IntrinsicElements?
@prmph Может быть, в документации немного непонятно, согласен. Я нашел @ types / react на github хорошим руководством. По сути, он должен предоставлять информацию о типе «официальных» элементов html. Или нет, вы можете полностью опустить его, как указано в документации.
@ Kaldestad: Спасибо за обновление ссылки; первая версия была мертва. Но у меня все еще нет того, что мне нужно. Как заставить JSX-движок распознавать пользовательский компонент, который не является частью внутренних элементов?
@prmph Я не совсем понимаю, что вы имеете в виду, говоря «распознавать нестандартный компонент». Фабрика либо справится, либо не справится со всем, что ей брошено. Самый простой способ разобраться в этом - просто попробовать. Если вам интересно, как создавать типы, относящиеся к пользовательским компонентам, снова обратитесь либо к официальным документам TS, либо к чему-то вроде @ types / react, где все это реализовано и открыто для всех.
@Kaldestad: пожалуйста, посмотрите мою ветку с эстусом ниже, вы поймете, к чему я клоню
@prmph Я это вижу, и вы, по сути, просите нас отладить ваш код или предоставить очень конкретные детали реализации, которые полностью выходят за рамки исходного вопроса. И снова, почему бы не посмотреть response на гитхабе, где все это уже реализовано?
@Kaldestad: Нет, я не прошу вас отлаживать мой код. Я просто использую очень минимальную реализацию, чтобы продемонстрировать недостатки официальной документации. Какая польза от документов, если то, что они содержат, на самом деле не работает или настолько расплывчато, что не позволяет реализовать работающую реализацию?
За это отвечают jsx и jsxFactoryпараметры компилятора.
TypeScript ожидает, что функция, определенная в jsxFactory, будет существовать в области модуля. Обычно для этого требуется импортировать React, потому что по умолчанию для jsxFactory используется React.createElement.
Если компилятор настроен с:
...
"jsx": "react",
"jsxFactory": "h",
...
Тогда должна существовать функция h. Типы, связанные с JSX, должны быть определены для правильной работы проверки типов:
declare namespace JSX {
interface Element {}
interface ElementClass {
render(): any;
}
interface IntrinsicElements {
div: any;
// ...
}
}
const h = (Comp: any): any => console.info(`creating ${Comp} element`);
<div/>;
class FooComponent {
render = () => null;
}
<FooComponent/>;
Спасибо @estus: Означает ли это, что все компоненты, которые вы определяете, должны быть добавлены в структуру JSX.IntrinsicElements? Можете ли вы привести пример определения настраиваемого компонента, который будет распознаваться этой схемой?
Не совсем. IntrinsicElements предназначены для HTML и SVG. Вы можете использовать собственные типы React в качестве отправной точки, github.com/DefinitiTyped/DefinitiTyped/blob/…
Можете ли вы предоставить фрагмент кода настраиваемого нереагирующего компонента, тип которого проверяется TypeScript? Кажется, это лучший способ решить мою проблему.
Хорошо @estus, а как насчет функциональных компонентов? Я пробовал их, и они в основном работают, но иногда возникают какие-то странные ошибки. Например, const FComp = () => <div/> выдает ошибку, а const FComp = () => {return <div/> } - нет.
Также @estus, оценка <FComp /> сама по себе дает ошибку, а let elt = <FComp /> - нет.
Функциональные компоненты должны работать "из коробки". Это не должно вызывать ошибки. Какой код пробовали? Я предполагаю, что вы не ставили точку с запятой между строками. Функция должна возвращать вещь, которая является действительным элементом типа Reat (JSX.Element, null и т. д.). Обратитесь к typescriptlang.org/docs/handbook/jsx.html для справки.
Похоже, github.com/nicojs/typed-html - хороший способ сделать это.
Возможный дубликат Могу ли я использовать jsx без React для встраивания html в скрипт?