type_script

Различия

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

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
type_script [2024/05/02 18:11]
tro 		type_script [2024/05/04 11:18] (текущий)
tro
Строка 37: Строка 37:
  
 </code> </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 ====
 Literal Type — це тип, що набуває конкретного значення. З ним ви можете визначити тип змінної так, щоб він набував лише певних значень. Literal Type — це тип, що набуває конкретного значення. З ним ви можете визначити тип змінної так, щоб він набував лише певних значень.
 +Тобто може містити лише одне з можливих рядкових значень.
 <code> <code>
 type OneOrTwo = 1 | 2; type OneOrTwo = 1 | 2;
Строка 281: Строка 285:
  
 </code> </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>
 +
  
  • /sites/data/attic/type_script.1714673476.txt.gz
  • Последнее изменение: 2024/05/02 18:11
  • — tro