Текст книги "React и TypeScript: Практическое руководство. Быстрый старт"

В библиотеке React Router есть удобный хук useParams, который позволяет извлекать параметры маршрута в функциональных компонентах.

Например:

 
import {useParams} from ’react-router-dom’
 
 
function UserProfile () {
  // Извлекаем параметр маршрута по его имени (например, ’id’)
  const {id} = useParams <{id: string}> ()
 
 
  // Теперь мы можем использовать ’id’ в компоненте
  return (
    <div>
      <h2> User Profile </h2>
      <p> User ID: {id} </p>
    </div>
 

)

}

В приведенном примере useParams извлекает параметр маршрута id, и мы можем использовать его в компоненте. После извлечения параметров маршрута с помощью useParams, вы можете выполнять различные действия в зависимости от значений параметров. Например, вы можете загрузить данные из базы данных, отобразить определенную информацию или выполнить любую другую логику, которая зависит от параметров маршрута.

Важно помнить о типизации параметров маршрута, особенно при использовании TypeScript. Вы можете определить тип параметра маршрута в угловых скобках в useParams. Например, {id: string} указывает, что id должен быть строкой. Это помогает обеспечить безопасность типов данных в вашем приложении.

React Router предоставляет хук useHistory, который позволяет программно управлять навигацией. Вы можете использовать этот хук в функциональных компонентах для перенаправления пользователя на другую страницу.

Пример:

 
import {useHistory} from ’react-router-dom’
 
 
function Home () {
  const history = useHistory ()
 
 
  const handleButtonClick = () => {
    // Перенаправление на другую страницу
    history. push (»/about’)
}
 
 
  return (
    <div>
      <h2> Домашняя страница </h2>
      <button onClick= {handleButtonClick}> Перейти к О нас </button>
    </div>
 

)

}

В этом примере мы используем useHistory, чтобы перенаправить пользователя на страницу /about, когда он нажимает на кнопку.

Динамическая навигация также позволяет передавать параметры маршрута при переходе на другие страницы. Например, вы можете передать идентификатор пользователя в URL для отображения его профиля:

 
import {useHistory} from ’react-router-dom’
 
 
function UserProfile () {
  const history = useHistory ()
 
 
  const handleButtonClick = (userId: number) => {
    // Перенаправление на страницу профиля с параметром userId
    history. push (`/profile/$ {userId} `)
}
 
 
  return (
    <div>
      <h2> User Profile </h2>
      <button onClick= {() => handleButtonClick (123)}> Показать профиль
пользователя </button>
    </div>
 

)

}

Защита маршрутов – это механизм обеспечения безопасности и контроля доступа к определенным страницам или разделам приложения. В веб-разработке это часто используется для ограничения доступа к определенным страницам только для авторизованных пользователей или для пользователей определенных ролей.

Один из распространенных способов защиты маршрутов в React – это использование PrivateRoute – компонента-обертки для Route, который проверяет, авторизован ли пользователь, прежде чем разрешить доступ к защищенному маршруту. Если пользователь не авторизован, его перенаправляют на страницу входа или предлагается выполнить аутентификацию.

Например, PrivateRoute. jsx:

 
import React from ’react’
import {Route, Redirect} from ’react-router-dom’
 
 
const isAuthenticated = () => {
  // Здесь логика проверки авторизации пользователя
  // Возвращает true, если пользователь авторизован, иначе false
  return true; // Временный возврат true для примера
}
 
 
const PrivateRoute = ({component: Component, …rest}) => {
  return (
    <Route
{…rest}
      render= {props =>
        isAuthenticated ()? (
          <Component {…props} />
): (
          <Redirect to="/login» />
)
}
    />
)
}
 
 
export default PrivateRoute
 

App. jsx:

 
import React from ’react’
import {BrowserRouter as Router, Route} from ’react-router-dom’
import PrivateRoute from». /PrivateRoute’
import Dashboard from». /Dashboard’
import Login from». /Login’
 
 
const App = () => {
  return (
    <Router>
      <div>
        <Route path="/login» component= {Login} />
        <PrivateRoute path="/dashboard» component= {Dashboard} />
        {/* Другие публичные маршруты */}
      </div>
    </Router>
)
}
 
 
export default App
 

Таким образом, PrivateRoute может быть использован для ограничения доступа к защищенным страницам, требующим аутентификации пользователя перед их отображением.

Динамическая навигация – это мощный инструмент в веб-разработке, позволяющий создавать динамические и интерактивные пользовательские интерфейсы. Мы рассмотрели основные концепции динамической навигации с использованием React Router.

– Маршрутизация и компонент Routeж. React Router позволяет определять маршруты и связывать их с компонентами приложения, что обеспечивает отображение различного контента на основе URL.

– Передача параметров. Мы рассмотрели, как можно передавать параметры через маршруты для динамического отображения данных, например, при отображении информации о пользователе или деталях объекта.

– Фильтрация данных. Динамическая навигация также может использоваться для фильтрации данных, позволяя пользователям выбирать определенные параметры или категории для отображения нужной информации.

– Защита маршрутов. Мы обсудили защиту маршрутов, что важно для ограничения доступа к определенным страницам только для авторизованных пользователей или определенных ролей.

Эти возможности React Router делают приложения более динамичными, интерактивными и безопасными, обеспечивая пользователю гибкую навигацию и контроль над отображаемым контентом.

В следующей главе мы перейдем к изучению typescript.

Дополнительная информация

Метод map () в JavaScript является одним из наиболее удобных и часто используемых методов массивов. Он позволяет пройти по каждому элементу массива и преобразовать каждый элемент в соответствующее значение, создавая новый массив из результатов выполнения функции для каждого элемента исходного массива.

Особенности метода map ():

– Итерация3232
  Итерация – это процесс повторения или перебора элементов в коллекции данных, таких как массивы, объекты или другие структуры данных. Этот процесс позволяет выполнять операции с каждым элементом в коллекции поочередно.


[Закрыть] по элементам массива. Метод map () выполняет указанную функцию один раз для каждого элемента в массиве в порядке их следования.

– Создание нового массива. Он возвращает новый массив с результатами выполнения функции для каждого элемента исходного массива.

Новый массив, созданный методом map (), представляет собой независимую копию результатов обработки исходного массива. Это гарантирует, что изменения, внесенные в новый массив, не отразятся на исходном, и наоборот. Такой подход обеспечивает безопасность исходных данных, предотвращая нежелательные побочные эффекты.

Кроме того, метод map () обладает гибкостью, позволяя применять к массиву разнообразные функции обратного вызова. Он не только создает новый массив на основе результатов функции, но и может выполнять преобразования элементов массива, делая его одним из мощных инструментов для манипуляций с данными в JavaScript.

Пример использования метода map ():

 
const numbers = [1, 2, 3, 4, 5];
 
 
// Удвоение каждого числа
const doubledNumbers = numbers.map (num => num * 2);
console. log (doubledNumbers); // Output: [2, 4, 6, 8, 10]
 

reduce () – это метод массива, который применяется для сведения массива к единственному значению на основе выполнения функции-аккумулятора. Он применяет функцию к каждому элементу массива слева направо, сводя их к одному значению.

Вот несколько ключевых моментов о reduce ():

– Сводит к единственному значению. reduce () проходит по всем элементам массива и аккумулирует их в одно значение на основе функции-аккумулятора.

– Функция-аккумулятор. Эта функция принимает четыре аргумента: предыдущее значение (или начальное значение), текущий элемент, текущий индекс и сам массив. Она выполняется для каждого элемента и возвращает накопленный результат.

– Начальное значение. Начальное значение можно не указывать явно. В этом случае первый элемент массива будет использован в качестве начального значения, а итерация начнется со второго элемента.

– Изменение формы данных. reduce () также может быть использован для изменения формы данных, например, преобразования массива в объект или другую структуру данных.

– Аккумуляция значений. Он может использоваться для сбора значений, таких как сумма чисел, конкатенация строк или агрегация сложных данных.

– Гибкость. Этот метод является мощным инструментом для обработки данных и может быть применен для решения различных задач обработки массивов в JavaScript.

Пример:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce ((accumulator, currentValue) => accumulator + currentValue, 0);

// Начальное значение равно 0. Функция складывает все числа в массиве.

console. log (sum); // Выведет 15 (1 +2 +3 +4 +5)

Часть 5. TypeScript в React

TypeScript – это расширение языка JavaScript, которое дополняет его возможности и добавляет статическую типизацию. Это означает, что TypeScript позволяет разработчикам создавать более надежные и поддерживаемые приложения. Статическая типизация позволяет выявлять и предотвращать множество ошибок на этапе разработки, что делает код более надежным и облегчает его поддержку. В этой главе мы рассмотрим основные концепции и типы данных в TypeScript, которые помогут вам начать использовать этот мощный инструмент для разработки веб-приложений.

TypeScript – это строго типизированный язык программирования, разработанный Microsoft. Он представляет собой надстройку над JavaScript, которая добавляет статическую типизацию к динамическому языку JavaScript. Это означает, что вы можете определить типы данных для ваших переменных, функций и объектов, что помогает обнаруживать ошибки на этапе компиляции, а не только во время выполнения кода.

Одним из основных преимуществ TypeScript является его способность улучшать читаемость и поддерживаемость кода. При работе с большими и сложными проектами, где участвует несколько разработчиков, это становится критически важным. Статическая типизация позволяет легче понимать код и предотвращать множество распространенных ошибок, таких как неправильное использование переменных или вызов функций с неправильными аргументами.

TypeScript имеет следующие преимущества по сравнению с обычным javascript:

– Статическая типизация3333
  При статической типизации типы данных указываются явно для переменных, функций, аргументов и возвращаемых значений.


[Закрыть]. Помогает обнаруживать ошибки на этапе разработки, связанные с типами данных.

– Улучшенная поддержка инструментов. TypeScript предоставляет богатую интеграцию с средами разработки, что упрощает работу с кодом.

– Более надежный код. Статическая типизация способствует более надежному и предсказуемому поведению приложения.

– TypeScript совместим с существующими JavaScript-кодом.

Процесс статической типизации в TypeScript включает следующие шаги:

– Явное указание типов. Разработчики указывают типы переменных, параметров функций и других структур данных явно в коде.

– Проверка типов на этапе компиляции. TypeScript выполняет проверку типов на этапе компиляции кода. Если обнаруживаются какие-либо несоответствия типов (например, попытка присвоить число переменной типа string), компилятор выдаст ошибку.

– Предотвращение ошибок выполнения. Благодаря статической типизации, многие ошибки, связанные с типами данных, могут быть выявлены на этапе написания кода и избежаны на этапе выполнения программы.

– Улучшение понимания кода. Явное указание типов делает код более понятным и читаемым для других разработчиков, так как типы данных предоставляют информацию о том, какие данные ожидаются или возвращаются функцией.

– Основные типы данных в TypeScript

Обзор основных типов данных:

– number – тип для числовых значений. Включает как целые числа, так и числа с плавающей точкой:

let num: number = 5

let pi: number = 3.14

– string – тип для текстовых значений:

let str: string = «Привет, мир!»

– Boolean – тип для логических значений true или false:

let isDone: boolean = false

– undefined – представляет собой значение, которое имеет только одно значение – undefined. Оно используется для переменных, которые не были инициализированы:

let u: undefined = undefined

– null – тип, имеющий одно значение – null. Он используется для обозначения отсутствия значения.

let n: null = null

– bigint – тип bigint используется для представления целых чисел произвольной длины, позволяя работать с числами, которые превышают максимальное значение типа number:

 
let bigNumber: bigint = 1234567890123456789012345678901234567890n
console. log (bigNumber) // Выведет: 234567890123456789012345678901234567890n
 

– Специальные типы данных в TypeScript

Список специальных типов:

– symbol – уникальный тип, представляющий уникальные и неизменяемые идентификаторы:

const id1 = Symbol (’id’)

const id2 = Symbol (’id’) // Эти разные символы

– any – тип, который может принимать значения различных типов:

 
let variable: any = 10
variable = «Строка»
variable = false
 

– void – представляет отсутствие любого типа и обычно используется для обозначения функций, которые не возвращают никакого значения:

function logMessage (): void {

console. log («Message logged’)

}

– never – используется для функций, которые никогда не заканчивают выполнение (например, выбрасывают ошибку или бесконечный цикл):

function throwError (message: string): never {

throw new Error (message)

}

– any – позволяет переменной иметь любой тип:

let z: any = «Hello’

z = 123

– unknown – похож на any, но предоставляет более безопасный способ работы с данными неизвестного типа, требуя явного приведения типов перед использованием:

 
let notSure: unknown = 4
if (typeof notSure === ’string’) {
let strLength: number = notSure. length // Ошибка: Не удается вызвать метод length у типа unknown
 

}

– Составные типы данных в TypeScript

К составным типам относятся:

– массивы (array) – составной тип, содержащий упорядоченный список элементов одного типа:

let numbers: number [] = [1, 2, 3, 4]

let names: string [] = [«Alice», «Bob», «Charlie»]

– объекты (object) представляют структуру, где ключи ассоциируются с определенными типами значений:

 
let person: {name: string; age: number} = {
name: «Alice»,
age: 30,
 

}

– кортежи (tuple) – это массив с фиксированным количеством элементов и определенными типами для каждого элемента в массиве:

let employee: [string, number] = [«Alice», 30]

– перечисления (enum) – это специальный тип, представляющий собой набор численных значений, которые могут быть связаны с символьными именами. Он упрощает работу с наборами значений, делая код более читаемым и понятным:

 
enum DaysOfWeek {
Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday
}
 
 
console.log(DaysOfWeek.Monday) // Выведет: 0
console. log (DaysOfWeek. Tuesday) // Выведет: 1
 

Также можно использовать строковые значения или инициализировать значения явно:

 
enum Colors {
Red = «RED»,
Green = «GREEN»,
Blue = «BLUE»
 

}

TypeScript придает JavaScript статическую типизацию, повышая надежность и понимание кода. Эта особенность позволяет указывать типы данных для переменных, параметров функций и возвращаемых значений, обнаруживая ошибки на этапе компиляции и увеличивая надежность кода. Умение работать с основными типами данных делает обработку данных гибкой и безопасной, помогая избежать потенциальных ошибок.

Статическая типизация в TypeScript не только обеспечивает безопасность данных, но и улучшает процесс разработки, делая код более понятным и предсказуемым. Освоив основные типы данных, вы сможете более эффективно работать с информацией и избегать потенциальных уязвимостей в коде.

В следующей главе мы рассмотрим, как подключить в проект typescript.

Глава 2. Добавление TypeScript в проект React

В этой главе мы рассмотрим, как интегрировать TypeScript в проект React.

Чтобы начать использовать TypeScript с React, выполните следующие шаги:

– Создайте новый проект React:

npx create-react-app my-app

– Установите TypeScript зависимости:

cd my-app

npm install – save typescript @types/node @types/react @types/react-dom @types/jest

Создайте файл конфигурации TypeScript в корневой папке проекта, который позволит вам настроить параметры компиляции, определить допустимые версии ECMAScript, и задать другие параметры для вашего проекта:

 
{
   «compilerOptions»: {
     «target»: «es5»,
     «lib»: [«dom», "dom.iterable», «esnext»],
     «allowJs»: true,
     «skipLibCheck»: true,
     «esModuleInterop»: true,
     «allowSyntheticDefaultImports»: true,
     «strict»: true,
     «forceConsistentCasingInFileNames»: true,
     «module»: «esnext»,
     «moduleResolution»: «node»,
     «resolveJsonModule»: true,
     «isolatedModules»: true,
     «noEmit»: true,
     «jsx»: «react»,
     «baseUrl»:». /»,
     «paths»: {
       "@/*»: [«src/*»]
}
},
   «include»: [«src»]
 

}

Переименуйте файлы с расширением. js в. tsx для всех ваших компонентов React.

Теперь вы можете запустить проект с TypeScript командой:

npm start

Добавление TypeScript в проект React приносит следующие преимущества:

– Статическая типизация: Помогает обнаруживать ошибки на этапе разработки, связанные с типами данных.

– Улучшенная поддержка инструментов: TypeScript интегрируется с средами разработки и предоставляет богатые возможности автодополнения и подсказок.

– Документация и поддержка кода: TypeScript помогает в поддержке кода, так как он предоставляет читаемую документацию по типам данных.

Добавление TypeScript в проект React – это значимый шаг в повышении надежности, читаемости и поддерживаемости вашего кода. В этой главе мы исследовали процесс интеграции TypeScript в ваши проекты на основе React и освоили ключевые концепции этой мощной комбинации. После добавления TypeScript вы можете пользоваться всеми его преимуществами, делая ваш код более надежным и понятным.

В следующих главах, мы углубимся в более сложные концепции, такие как интерфейсы, типы функций и дженерики, чтобы лучше освоить функционал TypeScript и его возможности.

Глава 3. Введение в основные концепции TypeScript: type, interface и generics

Интерфейсы, пользовательские типы и дженерики в TypeScript играют ключевую роль в обеспечении статической типизации кода, что улучшает его читаемость, поддерживаемость и надежность.

Интерфейсы в TypeScript представляют собой инструмент для определения структуры объектов. Они описывают формат объекта, включая определенные свойства и методы, а также их типы. Эти конструкции позволяют четко определить форму объекта, указывая, какие свойства и методы должны быть у объекта. Создание интерфейсов полезно для установления строгих соглашений между различными частями кода, обеспечивая стабильность и предсказуемость взаимодействия между ними.

Ключевые моменты интерфейсов:

– Описание структуры данных. Интерфейсы позволяют определить, как выглядит объект внутри кода. Они определяют формат объекта, описывая, какие свойства и методы присутствуют в объекте и какого они типа.

– Обеспечение контрактов. Использование интерфейсов подразумевает, что объект или класс, который реализует интерфейс, обязан иметь все свойства и методы, указанные в интерфейсе. Это помогает поддерживать структуру и согласованность в коде.

– Повторное использование. Интерфейсы могут использоваться в нескольких частях кода, обеспечивая единообразие структуры данных. Это улучшает читаемость и поддерживаемость кода, так как изменения в интерфейсе автоматически распространяются на все его реализации.

– Абстракция. Интерфейсы могут быть использованы для создания абстрактных типов данных. Они позволяют описать форму объекта без указания его конкретной реализации.

Пример интерфейса:

 
interface User {
  name: string
  age: number
  email?: string // Необязательное свойство
  greet: (message: string) => void // Метод, принимающий строку и не возвращающий значения
}
 
 
const user: User = {
  name: «Alice’,
  age: 25,
  greet: (message: string) => {
console.log(`${user.name} says: $ {message} `)
},
}
 
 
user.greet («Hello!»)
 

В TypeScript type используется для создания пользовательских типов данных, позволяя определять собственные типы, которые могут быть использованы повторно в коде.

Основные аспекты type:

– Определение пользовательских типов. С помощью type можно создавать пользовательские типы данных, которые представляют собой новый тип, составленный из других типов или структур данных.

– Алиас для типов. type может использоваться как алиас или синоним для существующих типов, что делает код более читаемым и понятным.

– Создание комплексных типов. type позволяет создавать более сложные типы данных, такие как объединения (union), пересечения (intersection), типы для функций и многое другое.

– Повторное использование типов. Определяя пользовательские типы с помощью type, можно легко повторно использовать их в различных частях приложения, что способствует уменьшению дублирования кода.

– Облегчение понимания кода. Использование type делает код более модульным и читаемым, особенно когда речь идет о сложных типах данных или длинных сигнатурах функций.

Пример с type:

 
type Point = {
  x: number
  y: number
}
 
 
type User = {
  id: number
  name: string
  location: Point
};
 
 
const user: User = {
  id: 1,
  name: «John Doe’,
  location: {x: 10, y: 20},
 

}