Различия

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

--- type_script [2024/05/02 17:23]
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]]
 ===== Типизація =====
 ==== Базова ====
@@ Строка 79: / Строка 82: @@
 </code>
 ==== Unknown ====
-TypeScript багато в чому схожий на any, але він забезпечує більше безпеки під час роботи зі змінними. Якщо ми спробуємо присвоїти значення змінної типу unknown іншій змінній з конкретним типом без явного приведення типів, TypeScript видасть помилку. Це допомагає запобігти випадковому присвоєнню значень неправильного типу.
+  * TypeScript багато в чому схожий на any, але він забезпечує більше безпеки під час роботи зі змінними. Якщо ми спробуємо присвоїти значення змінної типу unknown іншій змінній з конкретним типом без явного приведення типів, TypeScript видасть помилку. Це допомагає запобігти випадковому присвоєнню значень неправильного типу.
+  * Цей тип можна перетворити на інший тип за допомогою операторів as, typeof, instanceof.
 <code>
 function fetchUserData() {
@@ Строка 91: / Строка 95: @@
 </code>
 ==== Tuple (кортедж, фиксированній массив) ====
+Попри те, що кортежі фіксують число та типи елементів, метод push може бути використаний для додавання елементів до кортежу.
 <code>
 let tupleType: [string, boolean];
@@ Строка 118: / Строка 123: @@
 </code>
+Існує ще така конструкція, як **const enum**. На відміну від звичайного enum, const enum видаляється під час транспіляції та не створює додаткового об'єкта в JavaScript.
+Значення const enum вставляють у місце використання у вигляді літералів. Це може допомогти покращити продуктивність.
+<code>
+const enum HttpCodes {
+  OK = 200,
+  BadRequest = 400,
+  Unauthorized = 401,
+}
+const status = HttpCodes.OK;
+</code>
+==== Union Type ====
+Union Type у TypeScript дозволяє вказати, що значенням може бути один із кількох типів. Це дуже зручно, коли хочемо визначити змінну, яка може приймати різні типи даних. Типи перераховуються через вертикальну риску |
+<code>
+let mixedType: string | number | boolean;
+mixedType = 'string'; // OK
+mixedType = 10; // OK
+mixedType = true; // OK
+mixedType = {}; // Error: Type '{}' is not assignable to type 'string | number | boolean'.
+</code>
+==== Intersection Type ====
+Intersection type є способом об'єднання декількох типів в один. Це дозволяє створювати складні типи, комбінуючи прості. У TypeScript можна використовувати символ & для створення типу intersection.
+<code>
+type Employee = {
+  name: string;
+  id: number;
+};
+type Manager = {
+  employees: Employee[];
+};
+type CEO = Employee & Manager;
+const ceo: CEO = {
+  name: 'Alice',
+  id: 1,
+  employees: [
+    {
+      name: 'Bob',
+      id: 2,
+    },
+  ],
+};
+export {};
+</code>
+==== Literal Type ====
+Literal Type — це тип, що набуває конкретного значення. З ним ви можете визначити тип змінної так, щоб він набував лише певних значень.
+Тобто може містити лише одне з можливих рядкових значень.
+<code>
+type OneOrTwo = 1 | 2;
+let value: OneOrTwo;
+value = 1; // OK
+value = 2; // OK
+value = 3; // Error: Type '3' is not assignable to type 'OneOrTwo'.
+type YesOrNo = 'yes' | 'no';
+let answer: YesOrNo;
+answer = 'yes'; // OK
+answer = 'no'; // OK
+answer = 'maybe'; // Error: Type '"maybe"' is not assignable to type 'YesOrNo'.
+export {};
+</code>
+==== Return Type ====
+Return type — це тип даних, який функція повертає під час її виклику. TypeScript дозволяє вказувати тип значення, що повертається для функцій, що допомагає зробити ваш код більш зрозумілим і безпечним.
+<code>
+function greet(): string {
+  return 100; // Error: Type 'number' is not assignable to type 'string'
+}
+let result = greet();
+</code>
+<code>
+const greet = (): string => {
+  return "Hello, world!";
+}
+let result = greet();
+</code>
+TypeScript здатний автоматично визначати типи значень функцій, що повертаються, на основі їх реалізації. Так, якщо ви не вказали тип значення, що повертається явно, але ваша функція повертає, наприклад, рядок, TypeScript автоматично присвоїть цій функції тип значення, що повертається string.
+<code>
+function greet() {
+  return 'Hello, world!';
+}
+let result: string = greet();
+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>