React
Last updated
Last updated
Наш . Ось основні моменти:
Використовуйте файли з розширенням .tsx
(замість .ts
).
Використовуйте "jsx": "react"
у compilerOptions
вашого tsconfig.json
.
Встановіть визначення для JSX та React у вашому проекті: (npm i -D @types/react @types/react-dom
).
Імпортуйте react у ваші .tsx
файли (import * as React from "react"
).
React може рендерити або HTML-теги (рядки), або React-компоненти. Виклик JavaScript для цих елементів відрізняється (React.createElement('div')
проти React.createElement(MyComponent)
). Це визначається за регістром першої літери. foo
розглядається як HTML-тег, а Foo
- як компонент.
HTML-тег foo
повинен мати тип JSX.IntrinsicElements.foo
. Ці типи вже визначені для всіх основних тегів у файлі react-jsx.d.ts
, який ви встановили під час інсталяції. Ось приклад вмісту цього файлу:
Ви можете визначати функціональні компоненти просто за допомогою інтерфейсу React.FunctionComponent
. Наприклад:
Типи компонентів перевіряються на основі властивостей props
. Це моделюється після того, як JSX перетворюється, тобто атрибути стають props
компонента.
Файл react.d.ts
визначає клас React.Component<Props, State>
, який ви повинні розширити у свому власному класі і надати свої власні інтерфейси Props
і State
. Нижче наведено приклад:
Реакт може рендерити різні елементи, такі як JSX
або string
. Всі ці елементи об'єднані в типі React.ReactNode
, тому використовуйте його, коли ви хочете приймати рендерні елементи, наприклад:
Оголошення типу React.ReactElement<T>
надається в типових визначеннях React для того, щоб ви могли вказати тип результату інстанціювання класового компонента <T/>
, наприклад:
Звичайно, ви можете використовувати це як анотацію для аргументу функції, а також як
prop member
React компонента.
Тип React.Component<Props>
об'єднує React.ComponentClass<P>
та React.StatelessComponent<P>
, тому ви можете приймати щось, що має тип Props
і рендерити його за допомогою JSX, наприклад:
Це працює саме так, як очікувається. Ось приклад:
Щось на кшталт наступного працює добре:
Однак, використання узагальненої функції зі стрілкою цього не зробить:
Workaround: Використовуйте extends
для параметра generic, щоб підказати компілятору, що це узагальнюючий параметр, наприклад:
Ви по суті ініціалізуєте змінну як об'єднання посилання (ref
) і null
, а потім ініціалізуєте її як зворотний виклик (callback), наприклад:
І те саме з посиланнями (ref
) на вбудовані елементи, наприклад:
В TypeScript існує можливість використовувати переконання типу (type assertion), коли ви явно вказуєте компілятору, що ви знаєте більше про тип, ніж він сам.
Компоненти зі станом та пропсами за замовчуванням: Ви можете вказати TypeScript, що властивість буде надана ззовні (React), використовуючи оператор null assertion (це не ідеальний варіант, але це найпростіше мінімальне рішення з мінімальною кількістю додаткового коду, яке я зміг придумати).
Для SFC компонентів зі значеннями за замовчуванням рекомендується використовувати прості патерни JavaScript, оскільки вони добре поєднуються з системою типів TypeScript. Ось приклад:
Якщо ви використовуєте веб-компонент, визначення типів React за замовчуванням (@types/react
) не будуть знати про нього. Але ви можете легко оголосити його, наприклад, оголосити веб-компонент з назвою my-awesome-slider
, який приймає пропси MyAwesomeSliderProps
:
Тепер ви можете використовувати його в TSX:
Починаючи з , ви можете використовувати новий тип React.VoidFunctionComponent
або React.VFC
якщо ви хочете вказати, що компонент не приймає children
. Це проміжне рішення до наступної основної версії описів типів (де VoidFunctionComponent буде застарілим, і за замовчуванням FunctionComponent не буде приймати дітей).
Використовуйте синтаксис as Foo
для переконання типу, як ми рекомендуємо .