03 TypeScript
TypeScript с нуля - язык + паттерны проектирования
JSX
Чтобы начать писать на React внутри ТС, нужно:
.tsx- формат записи файлов ТС + Реакт- Задать настройку на jsx в тсконфиге
// tsconfig
"jsx": "react",- Установить сам реакт и его тайпсы
npm i react
npm i --save-dev @types/react- Подключить сам реакт:
import React from 'react';Сам JSX предсталяет из себя смесь JS и HTML. Саму вёрстку мы пишем непосредственно внутри JS. HTML и JSX - это разные вещи. Они отличаются немного написанием, но внутри JS вёрстка является объектом. Так же эти элементы React мы можем вкладывать друг в друга.
JSX в качестве типа - это namespace, в котором хранятся все типы элементов реакта
// Стандартный вариант записи элемента JSX
const a: JSX.Element = <div tabIndex={0}>{1 + 1}</div>;
// Полный вариант записи, который представляет из себя внутреннюю реализацию верхнего примера
const b: JSX.Element = React.createElement('div', {tabIndex: 0 }, 1 + 1);Так же нужно упомянуть, что прокаст типов в том стандартном виде из ТС работать не будет и нужно использовать as
const b = 1;
const a = b as string; // OK
const a = <string>b; // Error