Ирина Кириченко React и TypeScript: Практическое руководство. Быстрый старт читать онлайн страница 6

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

Он может выявить следующие виды проблем:

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

– Побочные эффекты при рендеринге. Если код при рендеринге компонента вызывает побочные эффекты (например, изменение состояния, которое влияет на сам компонент), поможет обнаружить такие сценарии.

– Использование несовместимых API. Предупреждает о применении устаревших или несовместимых с версией React API в приложении.

Запись document.getElementById (’root’) as HTMLElement означает, что мы пытаемся получить элемент с идентификатором ’root’ из DOM (Document Object Model) веб-страницы и привести его к типу HTMLElement. Этот код представляет собой так называемый «Type Assertion»13 в TypeScript, который используется для явного указания типа переменной.

При этом:

– document – это объект, представляющий веб-страницу в браузере.

– getElementById (’root’) – это метод объекта document, который пытается найти элемент на веб-странице с указанным идентификатором ’root’.

– as HTMLElement – это TypeScript-синтаксис, который используется для явного указания типа переменной. В данном случае, мы явно указываем, что результат вызова getElementById (’root’) должен быть интерпретирован как объект типа HTMLElement.

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

Пример «App. js»:

import React from «react»
import». /App. css»
function App () {
  return (
   
className=«App»>
     
       

Мое React-приложение

     
     
        {/* Здесь может быть контент вашего приложения */}
     
   
);
}
export default App

– Заполняем файл tsconfig. json

Файл tsconfig. json – это конфигурационный файл для TypeScript, который используется для настройки параметров компиляции и поведения TypeScript-компилятора14 (tsc). Этот файл обычно располагается в корневой директории проекта и определяет, как TypeScript должен обрабатывать и компилировать исходный код. В целом, tsconfig. json позволяет настроить проект так, чтобы TypeScript понимал, как правильно компилировать код в JavaScript.

В файле tsconfig. json можно определить ряд важных параметров и настроек для компиляции TypeScript. Вот некоторые из них:

– compilerOptions: Этот раздел определяет параметры компиляции TypeScript. Некоторые распространенные опции включают:

– target: Определяет версию JavaScript, на которую будет транспилирован TypeScript-код (например, «ES5» или «ES6»).

– module: Указывает, как TypeScript должен обрабатывать модули (например, «CommonJS», «ESNext»).

– outDir: Задает директорию, в которую будут скомпилированы выходные файлы.

– strict: Включает или отключает строгую типизацию.

– jsx: Определяет, как TypeScript должен обрабатывать JSX (например, «react» или «preserve»).

– include и exclude: Эти опции определяют, какие файлы TypeScript должны включаться в процесс компиляции (include) и какие файлы исключаться (exclude).

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