Skip to content

Commit 88081a1

Browse files
authored
Apply suggestions from code review
1 parent 81e7161 commit 88081a1

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/content/learn/typescript.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ npm install @types/react @types/react-dom
4949

5050
</Note>
5151

52-
Написання TypeScript-коду з використанням React дуже схоже на написання такого ж JavaScript-коду. Основна різниця під час роботи з компонентом полягає в тому, що ви можете вказувати типи пропсів вашого компонента. Ці типи можна використовувати для перевірки правильності коду та надання вбудованої документації в редакторах коду.
52+
Написання TypeScript коду з React дуже схоже на написання JavaScript коду з React. Основна різниця під час роботи з компонентом полягає в тому, що ви можете вказувати типи пропсів вашого компонента. Ці типи можна використовувати для перевірки правильності коду та надання вбудованої документації в редакторах коду.
5353

5454
Додамо тип для пропу `title` у кнопці, що є [компонентом `MyButton`](/learn#components) з розділу ["Швидкий старт"](/learn):
5555

@@ -119,18 +119,18 @@ export default App = AppTSX;
119119

120120
</Sandpack>
121121

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) для інших більш складних випадків.
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) для інших більш складних випадків.
123123

124124

125125
## Приклади для хуків {/*example-hooks*/}
126126

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) і, в ідеалі, не матимете потреби розбиратися з дрібницями надання типів.
128128

129129
Розглянемо кілька прикладів того, як вказати типи для хуків.
130130

131131
### `useState` {/*typing-usestate*/}
132132

133-
[`Хук useState`](/reference/react/useState) використовує передане початкове значення стану для визначення типу цього значення. Наприклад:
133+
[`Хук useState`](/reference/react/useState) перевикористовуватиме передане початкове значення стану для визначення типу цього значення. Наприклад:
134134

135135
```ts
136136
// Виведення типу як "boolean"
@@ -286,7 +286,7 @@ export default App = AppTSX;
286286

287287
Ця техніка спрацьовує, коли у вас є початкове значення з певним змістом, але іноді його немає, і тоді `null` може здатися прийнятним початковим значенням. Однак, щоб дозволити системі типізації розуміти ваш код, вам потрібно явно задати `ContextShape | null` для `createContext`.
288288

289-
Це спричиняє необхідність усунення `| null` з типу для споживачів контексту. Наша рекомендація полягає в тому, щоб хук здійснював перевірку під час виконання щодо існування значення та викидав помилку, якщо воно відсутнє:
289+
Це спричиняє необхідність усунення `| null` з типу для споживачів контексту. Ми рекомендуємо, щоб хук здійснював перевірку під час виконання щодо існування значення та викидав помилку, якщо воно відсутнє:
290290

291291
```js {5, 16-20}
292292
import { createContext, useContext, useState, useMemo } from 'react';
@@ -348,7 +348,7 @@ const handleClick = useCallback(() => {
348348
}, [todos]);
349349
```
350350
351-
Під час роботи TypeScript у суворому режимі (strict mode) `useCallback` вимагає додавання типів для параметрів функції зворотного виклику. Це тому, що тип функції зворотного виклику виводиться зі значення, поверненого з функції, і без знання параметрів його не можливо точно визначити.
351+
Під час роботи TypeScript у строгому режимі (strict mode) `useCallback` вимагає додавання типів для параметрів функції зворотного виклику. Це тому, що тип функції зворотного виклику виводиться зі значення, поверненого з функції, і без знання параметрів його не можливо точно визначити.
352352
353353
Залежно від уподобань щодо стилю коду ви можете використовувати функції `*EventHandler` з типами React, щоб надати тип обробнику подій одночасно з визначенням функції зворотного виклику:
354354

0 commit comments

Comments
 (0)