React и TypeScript: Практическое руководство. Быстрый старт - страница 6
Запись 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»:
Мое React-приложение
– Заполняем файл 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: Позволяет использовать другой конфигурационный файл в качестве базового и переопределить или дополнить его настройки.
– files и include: Определяют, какие файлы исходного кода TypeScript должны быть включены в компиляцию. Файлы перечислены в виде массива строк с путями к файлам.
– exclude: Определяет, какие файлы исходного кода TypeScript следует исключить из компиляции. Это также представлено в виде массива строк с путями к файлам.
– baseUrl и paths: Определяют настройки для алиасов путей к модулям, что может упростить импорт файлов в TypeScript.
При настройке tsconfig. json в своем проекте, убедитесь, что параметры соответствуют вашим требованиям, и что ваш код успешно компилируется и работает в соответствии с ожиданиями. Этот файл является важной частью инфраструктуры TypeScript-проекта и помогает обеспечить более точное и надежное развитие приложения. Правильная настройка tsconfig. json может также значительно улучшить процесс совместной разработки и обеспечить соблюдение стандартов кодирования в вашем проекте. В корне с проектом создайте файл tsconfig. json и напишите в него следующий код:
Похожие книги
