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

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

Особенности дженериков:

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

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

Пример использования дженериков:

 
function identity <T> (arg: T): T {
  return arg
}
 
 
// Использование функции с разными типами данных
let result1 = identity <number> (10) // result1 имеет тип number
let result2 = identity <string> («Hello») // result2 имеет тип string
 

Другие примеры использования дженериков:

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

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

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

Пример опционного свойства в интерфейсе:

 
interface User {
  name: string
  age: number
  email?: string // Опциональное свойство
 

}

В этом примере свойство email помечено как опциональное. Объект типа User может содержать email, но это не обязательное условие.

Также, опционные параметры могут использоваться в функциях:

function greetUser (name: string, message?: string) {

//…

}

Здесь message является опциональным параметром функции, и он может быть передан или опущен при вызове функции.

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

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

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

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

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

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

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

Пример экспорта переменной из модуля:

// Модуль «utils. ts»

export const PI = 3.14159

Импорт определений из модулей выполняется с помощью ключевого слова import, позволяя использовать экспортированные значения в других частях приложения.

Пример импорта переменной из модуля:

// Импорт переменной PI из модуля «utils. ts»

import {PI} from». /utils’

Различные типы экспорта:

– Именованный экспорт Экспорт определенных значений из модуля.

– Экспорт по умолчанию. Экспорт единственного значения по умолчанию из модуля.

Преимущества модульности:

– Чистота кода. Модули помогают избежать загрязнения глобального пространства имен.

– Повторное использование. Экспортированные значения могут быть повторно использованы в различных частях приложения.

Пример экспорта по умолчанию из модуля:

 
// Модуль «mathUtils. ts»
const add = (a: number, b: number): number => {
  return a + b
}
 
 
export default add
 

В этом примере функция add экспортируется по умолчанию из модуля mathUtils. ts. Это означает, что при импорте из этого модуля можно использовать ее без фигурных скобок и без необходимости использования точного имени переменной для импорта:

 
// Импорт функции add из модуля «mathUtils. ts»
import add from». /mathUtils’
 
 
const result = add (5, 3) // Вызов функции add
 
 
console. log (result) // Output: 8
 

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

Пространства имен (Namespaces) в TypeScript представляют собой механизм организации кода, который помогает предотвратить конфликты имен и группирует связанные объекты внутри отдельной области видимости3434
  Область видимости в JavaScript определяет, где и как переменные и функции доступны в коде.


[Закрыть].

Особенности пространств имен:

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

– Группировка кода. Они позволяют логически группировать связанные объекты, обеспечивая более удобную организацию кода, особенно при работе с большими проектами.

Создание пространств имен:

 
namespace MyNamespace {
  export const PI = 3.14159
 
 
  export function calculateArea (radius: number): number {
    return PI * radius * radius
 

}

}

Использование объектов из пространства имен:

 
const radius = 5;
const area = MyNamespace.calculateArea (radius)
 
 
console. log (area) // Output: 78.53975
 

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

Модули и пространства имен имеют ряд различий:

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

– Пространства имен не имеют встроенной поддержки импорта/экспорта и предназначены для логической группировки объектов в пределах одного файла или нескольких файлов.

Советы по использованию:

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

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

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

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

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

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

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

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

Области видимости в TypeScript:

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

 
let globalVar = 10
 
 
function globalFunction () {
console. log (globalVar) // доступ к переменной из глобальной области
 

}

– Область видимости блока. Переменные, объявленные с использованием ключевых слов let и const внутри блока кода (например, внутри {}), имеют область видимости этого блока и не доступны за его пределами:

 
function blockScope () {
  if (true) {
    let blockVar = 20
    console. log (blockVar) // доступ к переменной внутри блока кода
}
  console. log (blockVar) // Ошибка: blockVar недоступна за пределами блока
 

}

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

 
function functionScope () {
  if (true) {
    var functionVar = 30
    console. log (functionVar) // доступ к переменной внутри функции
}
  console. log (functionVar) // доступ к переменной внутри функции, т.к. var имеет область видимости функции
 

}

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

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

Часть 6. TypeScript в React

Глава 1. Декораторы в TypeScript

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

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

Основные моменты о декораторах:

– Синтаксис и применение: Декораторы используют специальный синтаксис символа @, за которым следует функция-декоратор. Они применяются к классам, методам, свойствам или параметрам функций.

– Использование в TypeScript: Декораторы позволяют добавлять метаданные, модифицировать поведение или реализовывать аспектно-ориентированное программирование (AOP). Они могут применяться к различным аспектам кода, таким как логирование, валидация, кэширование и другие задачи.

Пример применения декоратора к методу класса:

 
function Logger (target: any, key: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value
 
 
descriptor.value = function (…args: any []) {
      console. log (`Calling method $ {key} with arguments: $ {args} `)
      const result = originalMethod. apply (this, args);
      console. log (`Method $ {key} returned result: $ {result} `)
      return result
}
 
 
    return descriptor
}
 
 
  class Calculator {
    @Logger
    add (a: number, b: number) {
      return a + b
}
}
 
 
  const calc = new Calculator ()
console.log(calc.add (2, 3))
 

Если вы попробуете запустить этот код, то у вас выйдет ошибка:

«An argument for ’descriptor’ was not provided.»

Чтобы исправить эту ошибку, откройте файл tsconfig. json и в секцию

«compilerOptions»: {

)

Пропишите:

«experimentalDecorators»: true,

«emitDecoratorMetadata»: true,

После этого код запустится и в консоли выведет:

Calling method add with arguments: 2,3

Method add returned result: 5

В TypeScript декораторы могут применяться к классам, методам, свойствам, параметрам и даже к доступам3535
  Доступы – это способы получения (геттеры) и установки (сеттеры) значений свойств в классе. Это особые методы, которые используются для чтения и записи значений свойств объекта.


[Закрыть]. Они могут использоваться для реализации функций, таких как логирование, валидация, управление состоянием, создание аспектно-ориентированного кода и многое другое. Они добавляют мощь и гибкость в язык, позволяя создавать более модульный и чистый код.

В React декораторы использовались для создания высокоуровневых компонентов (Higher Order Components, HOCs), которые оборачивали другие компоненты для добавления функциональности. Но начиная с версии React 16.3, предпочтительнее использовать другие подходы, такие как функции высшего порядка (Higher Order Functions) и компоненты-контейнеры для достижения той же функциональности.

Пример использования декораторов в React с TypeScript:

 
import React from ’react’
 
 
function Logger (target: any) {
  console. log (`Component ${target.name} is rendered`)
}
 
 
@Logger
class MyComponent extends React.Component {
  render () {
    return <div> Hello, world! </div>
 

}

}

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

Однако, хотя декораторы являются частью спецификации typescript, их использование в React ограничено изменениями в языке и фреймворке. Недавние изменения в React поддерживают альтернативные подходы, что делает декораторы менее рекомендуемыми для использования в данном фреймворке. Вместо этого, стоит рассмотреть функции высшего порядка и компоненты-контейнеры.

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

Глава 2. Аннотации типов для функций и компонентов

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

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

Аннотации типов параметров возвращаемого значения:

function add (a: number, b: number): number {

return a + b

}

const result = add (1, 2) // Ожидается, что result будет числом

Аннотации типов применяются для определения типов свойств (props) и состояния (state) компонентов. Это позволяет более точно описывать ожидаемые типы данных, улучшая понимание и использование компонентов в процессе разработки и обеспечивая раннее выявление потенциальных проблем с типами данны.

Аннотации типов для props в React используются для определения ожидаемых типов данных, которые компонент ожидает получить при использовании.

Пример аннотации типов для props компонентов:

 
interface MyComponentProps {
   name: string
   age: number
}
 
 
 function MyComponent (props: MyComponentProps) {
   return (
     <div>
       <p> Name: {props.name} </p>
       <p> Age: {props.age} </p>
     </div>
 

);

}

Аннотации типов для state в React позволяют определить ожидаемые типы данных состояния компонента.

Например:

 
interface MyComponentState {
   count: number
}
 class MyComponent extends React.Component <{}, MyComponentState> {
   constructor (props: {}) {
     super (props)
this.state = {
       count: 0,
}
}
   render () {
     return <p> Count: {this.state.count} </p>
 

}

}

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

Аннотации типов для событий:

 
interface MyComponentProps {
   onClick: (event: React.MouseEvent <HTMLButtonElement>) => void;
}
 function MyComponent (props: MyComponentProps) {
   return (
     <button onClick= {props. onClick}> Click me </button>
)
}
  class MyComponent extends React.Component {
   handleClick = (event: React.MouseEvent <HTMLButtonElement>) => {
     // Обработка события
}
   render () {
     return <button onClick= {this. handleClick}> Click me </button>;
 

}

}

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

В следующей главе мы рассмотрим методы объявления типов для свойств (props) и состояния (state), что позволит более строго типизировать передаваемые свойства и управлять состоянием компонентов в проекте..

Глава 3. Типизация props и state компонентов

В React, объявление и правильное использование типов для props и state компонентов играют важную роль в обеспечении надежности и читаемости вашего кода. Когда вы создаете компоненты, важно иметь четкие и однозначные описания, какие данные они ожидают (props) и какие данные могут содержать в своем внутреннем состоянии (state). Правильное объявление типов облегчает командной работе, обнаружению ошибок на ранних этапах разработки и автоматической подсказке в вашей интегрированной среде разработки.

В этой главе мы рассмотрим, как объявлять типы для props и state компонентов.

Props (свойства) представляют входные данные, передаваемые в компоненты React. Для объявления типов данных для props используются интерфейсы (interfaces) или типы (types).

Интерфейс (interface) и тип (type) – это два различных способа определения пользовательских типов данных в TypeScript, и они имеют некоторые различия:

– Интерфейс (interface):

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

– Они могут быть объединены (расширены) при объявлении других интерфейсов с помощью ключевого слова extends.

– Интерфейсы могут быть реализованы классами.

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

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


[Закрыть] для определения интерфейсов объектов.

Пример интерфейсов:

 
interface MyComponentProps {
   name: string
   age: number
}
 function MyComponent (props: MyComponentProps) {
   return (
     <div>
       <p> Name: {props.name} </p>
       <p> Age: {props.age} </p>
     </div>
 

)

}

– Тип (type):

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

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

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

– Могут использоваться с ключевыми словами union, intersection и другими для создания более сложных типов.

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

 
type MyComponentProps = {
   name: string
   age: number
}
 function MyComponent (props: MyComponentProps) {
   return (
     <div>
       <p> Name: {props.name} </p>
       <p> Age: {props.age} </p>
     </div>
 

)

}

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