Начальный проект Typescript Lit Element включает это объявление глобального интерфейса внизу элемента примера:
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement;
}
}
Это необходимо? Для чего это используется?
Требуется ли объявление глобального интерфейса проекта машинописного текста с подсветкой?
04.12.2020
Ответы:
1
Это необходимо?
Нет, это объявление не требуется для работы вашего настраиваемого элемента на основе LitElement.
Для чего это используется?
Это особенность TypeScript, а не только LitElement.
Это объявление помогает TypeScript обеспечивать строгую типизацию при взаимодействии с DOM API. API JavaScript DOM, конечно, не знает и не заботится о типах, но TypeScript знает. С помощью этого механизма вы можете добавить тип ваших пользовательских элементов в DOM API.
Пример может лучше проиллюстрировать это. Предполагая этот очень простой настраиваемый элемент:
class HelloWorldElement extends HTMLElement {
name = 'world'; // public 'name' member with default value
// ... element internals left aside,
// just assume this.name is used somewhere ...
}
window.customElements.define('hello-world', HelloWorldElement);
Теперь рассмотрите возможность использования этого элемента с API DOM:
const el = document.createElement('hello-world');
// el has the very generic type HTMLElement
el.name = 'custom elements'; // error! HTMLElement has no member 'name'
TypeScript вам не позволит. У него нет возможности (пока) узнать, что имя тега hello-world соответствует экземпляру HelloWorldElement, поскольку оператор customElements.define(...) выполняется во время выполнения, но безопасность типов проверяется во время компиляции.
Но если вы расширите объявление HTMLElementTagNameMap, TypeScript будет знать тип элемента <hello-world></hello-world>:
// with the added declaration
declare global {
interface HTMLElementTagNameMap {
'hello-world': HelloWorldElement;
}
}
const el = document.createElement('hello-world');
// el has type HelloWorldElement
el.name = 'custom elements'; // OK. HelloWorldElement has a string member 'name'
Если вы хотите узнать больше, вы найдете их в Руководстве по TypeScript < / а>.
18.12.2020
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально
Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение
Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования
Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv)
Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..