Различия

Показаны различия между двумя версиями страницы.

--- type_script [2024/05/04 11:00]
tro
+++ type_script [2024/05/04 11:18] (текущий)
tro
@@ Строка 37: / Строка 37: @@
 </code>
+===== Рефакторінг проекту з React на TypeScript + React =====
+[[https://www.edu.goit.global/uk/learn/13328540/23199026/23199063/training?blockId=23199148#:~:text=%D0%9C%D1%96%D0%B3%D1%80%D0%B0%D1%86%D1%96%D1%8F%20%D0%BF%D1%80%D0%BE%D1%94%D0%BA%D1%82%D1%83%20%D0%BD%D0%B0%20TypeScript|Міграція проєкту на TypeScript]]
 ===== Типизація =====
 ==== Базова ====
@@ Строка 282: / Строка 285: @@
 </code>
-====== Використання сторонніх бібліотек ======
+===== Використання сторонніх бібліотек =====
+Іноді ви можете зіткнутися з бібліотекою, що не підтримує TypeScript з коробки. У цьому випадку вам потрібно встановити окремі визначення типів для цієї бібліотеки.\
+==== DefinitelyTyped ====
+це репозиторій на GitHub, у якому спільнота TypeScript підтримує визначення типів для тисяч JavaScript-бібліотек.
+Наприклад, для бібліотеки react-router-dom команда виглядатиме так:
+<code>
+npm install --save-dev @types/react-router-dom
+</code>
+==== Хуки, які зазвичай не потрібно типізувати ====
+==== useEffect ====
+useEffect очікує, що функція, що передається, буде повертати void або функцію очищення, яка теж повертає void. Усі ці типи ми можемо не вказувати, і просто писати так:
+<code>
+useEffect(() => {
+    let isActive = true;
+    return (): void => {
+      isActive = false;
+    };
+  }, []);
+</code>
+==== useMemo ====
+У цьому прикладі ми використовуємо хук useMemo для оптимізації продуктивності. Ми створюємо мемоізоване значення selectedUser, яке перераховується лише за зміни users або selectedUserId.
+<code>
+import React, { useMemo } from 'react';
+type User = {
+  id: number;
+  name: string;
+};
+type Props = {
+  users: User[];
+  selectedUserId: number;
+};
+export function UserList({ users, selectedUserId }: Props) {
+  const selectedUser = useMemo(() => {
+    return users.find(user => user.id === selectedUserId);
+  }, [users, selectedUserId]);
+  return (
+    <div>
+      {selectedUser && <p>Selected user is {selectedUser.name}</p>}
+      {users.map(user => (
+        <p key={user.id}>{user.name}</p>
+      ))}
+    </div>
+  );
+}
+</code>