Типы для Event

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

Основные события, с которыми работают компоненты в Stencil, соответствуют стандартам DOM, таким как click, input, change и другие. Эти события можно привязать к методам или обработчикам внутри компонента, чтобы обрабатывать их как обычные события браузера.

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

Пример:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-button',
  styleUrl: 'my-button.css',
  shadow: true
})
export class MyButton {
  handleClick(event: MouseEvent) {
    console.log('Button clicked', event);
  }

  render() {
    return (
      <button onCl ick={(event) => this.handleClick(event)}>
        Click me
      </button>
    );
  }
}

В этом примере используется стандартный тип MouseEvent, который автоматически присваивается обработчику события onClick.

Кастомные события

Stencil позволяет создавать собственные события, которые можно распространять из компонента во внешний мир. Это позволяет легко интегрировать компоненты с другими частями приложения и делиться состоянием между ними. Для этого используется класс EventEmitter, который является частью API Stencil.

Типизация кастомных событий

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

Пример кастомного события:

import { Component, h, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-input',
  styleUrl: 'my-input.css',
  shadow: true
})
export class MyInput {
  @Event() valueChanged: EventEmitter<string>;

  handleInput(event: Event) {
    const input = event.target as HTMLInputElement;
    this.valueChanged.emit(input.value);
  }

  render() {
    return (
      <input type="text" onIn put={(event) => this.handleInput(event)} />
    );
  }
}

В этом примере событие valueChanged имеет тип EventEmitter<string>, что означает, что передаваемое значение должно быть строкой.

Типы для событий

Stencil поддерживает несколько типов для различных сценариев использования событий:

  1. EventEmitter — базовый тип для кастомных событий, где T — это тип данных, который будет передан через событие.
  2. UIEvent — используется для событий, которые происходят в пользовательском интерфейсе, например, click, input, focus и другие.
  3. KeyboardEvent — тип события для обработки событий клавиатуры, таких как keydown, keyup и keypress.
  4. MouseEvent — тип события для обработки событий мыши, таких как click, dblclick, mousedown, mouseup, mousemove.
  5. TouchEvent — тип события для обработки событий касания на мобильных устройствах, таких как touchstart, touchend, touchmove, touchcancel.

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

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

import { Component, h, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-input',
  styleUrl: 'my-input.css',
  shadow: true
})
export class MyInput {
  @Event() valueChanged: EventEmitter<string>;

  handleInput(event: InputEvent) {
    const input = event.target as HTMLInputElement;
    this.valueChanged.emit(input.value);
  }

  render() {
    return (
      <input type="text" onIn put={(event) => this.handleInput(event)} />
    );
  }
}

Здесь тип события был изменён на InputEvent, что обеспечивает доступ к специфическим свойствам события ввода.

Управление событиями

Stencil позволяет использовать не только типы для событий, но и гибко управлять их распространением. Для этого можно задать флаг bubbles (определяет, должно ли событие пузыриться по дереву DOM) и cancelable (определяет, может ли событие быть отменено).

Пример с настройкой событий:

import { Component, h, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-custom-element',
  styleUrl: 'my-custom-element.css',
  shadow: true
})
export class MyCustomElement {
  @Event({ bubbles: true, cancelable: true }) customEvent: EventEmitter<string>;

  triggerEvent() {
    this.customEvent.emit('Hello, World!');
  }

  render() {
    return (
      <button onCl ick={() => this.triggerEvent()}>
        Trigger Custom Event
      </button>
    );
  }
}

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

Слушатели событий

Для добавления слушателей событий можно использовать стандартные атрибуты HTML, такие как onClick, onInput, или воспользоваться более сложными механиками, как подписка на события с помощью addEventListener и removeEventListener.

Пример добавления слушателя с addEventListener:

import { Component, h, Element } from '@stencil/core';

@Component({
  tag: 'my-button',
  styleUrl: 'my-button.css',
  shadow: true
})
export class MyButton {
  @Element() el: HTMLElement;

  componentDidLoad() {
    this.el.addEventListener('click', this.handleClick);
  }

  componentDidUnload() {
    this.el.removeEventListener('click', this.handleClick);
  }

  handleClick(event: MouseEvent) {
    console.log('Button clicked', event);
  }

  render() {
    return <button>Click me</button>;
  }
}

В данном примере события добавляются вручную через addEventListener в методах жизненного цикла компонента componentDidLoad и удаляются в componentDidUnload.

Заключение

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

Оглавление