You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Написання TypeScript-коду з використанням React дуже схоже на написання такого ж JavaScript-коду. Основна різниця під час роботи з компонентом полягає в тому, що ви можете вказувати типи пропсів вашого компонента. Ці типи можна використовувати для перевірки правильності коду та надання вбудованої документації в редакторах коду.
52
+
Написання TypeScriptкоду з React дуже схоже на написання JavaScriptкоду з React. Основна різниця під час роботи з компонентом полягає в тому, що ви можете вказувати типи пропсів вашого компонента. Ці типи можна використовувати для перевірки правильності коду та надання вбудованої документації в редакторах коду.
53
53
54
54
Додамо тип для пропу `title` у кнопці, що є [компонентом `MyButton`](/learn#components) з розділу ["Швидкий старт"](/learn):
Тип, що описує пропси вашого компонента, може бути простим або складеним, але він повинен бути об'єктним типом, створеним за допомогою `type` або `interface`. Дізнайтеся про те, як TypeScript описує об'єкти, у статті ["Об'єктні типи"](https://www.typescriptlang.org/docs/handbook/2/objects.html); ви також можете бути зацікавлені у використанні [типів об'єднання (union types)](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) для опису пропу з кількома різними типами або у [створенні типів із типів](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) для інших більш складних випадків.
122
+
Тип, що описує пропси вашого компонента, може бути настільки простим або складним, наскільки ви забажаєте, хоч вони і повинні бути об'єктом, описані за допомогою `type` або `interface`. Дізнайтеся про те, як TypeScript описує об'єкти, у статті ["Об'єктні типи"](https://www.typescriptlang.org/docs/handbook/2/objects.html); ви також можете бути зацікавлені у використанні [типів об'єднання (union types)](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) для опису пропу з кількома різними типами або у [створенні типів із типів](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) для інших більш складних випадків.
123
123
124
124
125
125
## Приклади для хуків {/*example-hooks*/}
126
126
127
-
Визначення типів з пакету `@types/react` включають типи вбудованих хуків для використання у компонентах без додаткових налаштувань. Вони створені з урахуванням коду у вашому компоненті, тому ви часто отримуватиме [виведені типи (inferred types)](https://www.typescriptlang.org/docs/handbook/type-inference.html) і у кращому разі не будете розбиратися з дрібницями надання типів.
127
+
Визначення типів з пакету `@types/react` включають типи вбудованих хуків для використання у компонентах без додаткових налаштувань. Вони створені з урахуванням коду у вашому компоненті, тому ви часто отримуватиме [виведені типи (inferred types)](https://www.typescriptlang.org/docs/handbook/type-inference.html) і, в ідеалі, не матимете потреби розбиратися з дрібницями надання типів.
128
128
129
129
Розглянемо кілька прикладів того, як вказати типи для хуків.
130
130
131
131
### `useState` {/*typing-usestate*/}
132
132
133
-
[`Хук useState`](/reference/react/useState)використовує передане початкове значення стану для визначення типу цього значення. Наприклад:
133
+
[`Хук useState`](/reference/react/useState)перевикористовуватиме передане початкове значення стану для визначення типу цього значення. Наприклад:
134
134
135
135
```ts
136
136
// Виведення типу як "boolean"
@@ -286,7 +286,7 @@ export default App = AppTSX;
286
286
287
287
Ця техніка спрацьовує, коли у вас є початкове значення з певним змістом, але іноді його немає, і тоді `null` може здатися прийнятним початковим значенням. Однак, щоб дозволити системі типізації розуміти ваш код, вам потрібно явно задати `ContextShape | null` для `createContext`.
288
288
289
-
Це спричиняє необхідність усунення `| null` з типу для споживачів контексту. Наша рекомендація полягає в тому, щоб хук здійснював перевірку під час виконання щодо існування значення та викидав помилку, якщо воно відсутнє:
289
+
Це спричиняє необхідність усунення `| null` з типу для споживачів контексту. Ми рекомендуємо, щоб хук здійснював перевірку під час виконання щодо існування значення та викидав помилку, якщо воно відсутнє:
Під час роботи TypeScript у суворому режимі (strict mode) `useCallback` вимагає додавання типів для параметрів функції зворотного виклику. Це тому, що тип функції зворотного виклику виводиться зі значення, поверненого з функції, і без знання параметрів його не можливо точно визначити.
351
+
Під час роботи TypeScript у строгому режимі (strict mode) `useCallback` вимагає додавання типів для параметрів функції зворотного виклику. Це тому, що тип функції зворотного виклику виводиться зі значення, поверненого з функції, і без знання параметрів його не можливо точно визначити.
352
352
353
353
Залежно від уподобань щодо стилю коду ви можете використовувати функції `*EventHandler` з типами React, щоб надати тип обробнику подій одночасно з визначенням функції зворотного виклику:
0 commit comments