Различия

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

--- type_script [2024/05/02 17:50]
tro [Return Type]
+++ 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]]
 ===== Типизація =====
 ==== Базова ====
@@ Строка 172: / Строка 175: @@
 ==== Literal Type ====
 Literal Type — це тип, що набуває конкретного значення. З ним ви можете визначити тип змінної так, щоб він набував лише певних значень.
+Тобто може містити лише одне з можливих рядкових значень.
 <code>
 type OneOrTwo = 1 | 2;
@@ Строка 214: / Строка 218: @@
 export {};
 </code>
+==== Void ====
+Тип void у TypeScript використовується для позначення відсутності будь-якого типу взагалі, і зазвичай використовується як тип функцій, що повертається, в якому функції не повертають значення.
+<code>
+function logMessage(message: string): void {
+  console.log(message);
+}
+logMessage('Hello, world!');
+export {};
+</code>
+==== Never ====
+Це коли функція ніколи не закінчується та нічого не повертає. Часто тип never використовується для функцій, які завжди викидають вийняток або у нескінченних циклах.
+<code>
+// Функція, яка завжди викидає помилку
+function throwError(message: string): never {
+  throw new Error(message);
+}
+// Функція з нескінченним циклом
+function infiniteLoop(): never {
+  while (true) {}
+}
+export {};
+</code>
+==== Function Type ====
+<code>
+let myFunc: (firstArg: string, secondArg: number) => void;
+myFunc = (first: string, second: number) => {
+  console.log(`First: ${first}, Second: ${second}`);
+};
+myFunc('Hello', 42); // Висновок: "First: Hello, Second: 42"
+export {};
+</code>
+===== Інтерфейси =====
+нтерфейс — це визначення кастомного типу даних, але без будь-якої реалізації.
+У TypeScript інтерфейси відіграють ключову роль статичної типізації. Вони допомагають забезпечити узгодженість та чіткість структури об'єктів чи класів.
+Давайте розглянемо приклад інтерфейсу для опису типу даних Person:
+<code>
+interface Person {
+  firstName: string;
+  lastName: string;
+  age?: number; // Необов'язкове поле
+}
+function greet(person: Person) {
+  console.log(`Hello, ${person.firstName} ${person.lastName}`);
+}
+const john: Person = {
+  firstName: 'John',
+  lastName: 'Doe',
+};
+greet(john); // Виведе: "Hello, John Doe"
+</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>