Это краткий обзор того, как использовать React Context API с Typescript.

Я собираюсь разрешить пользователям вводить имя и возраст, и эти данные будут отображаться под полями ввода.

Определите тип для нашего имени пользователя и возраста.

Наш API createContext потребует значений по умолчанию, поэтому мы должны их определить.

Теперь, когда у нас есть значения по умолчанию и их тип, мы можем создать контекст.

Создание контекста использования

Предоставление детям типов реквизита и создание функции-поставщика

Чтобы включить AuthProvider, чтобы вы могли получать доступ к значениям состояния и функциям из любого места, оберните весь компонент приложения с помощью AuthProvider.

используя контекстный API, мы создадим два поля ввода, одно для возраста и одно для поля имени. Импортируйте useAuth из файла Context и деструктурируйте необходимые значения.

Ознакомиться с исходным кодом