TypeScript и типизация

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

Основы типизации компонентов Svelte

Компоненты Svelte можно типизировать с помощью <script lang="ts">. Любой пропс компонента объявляется с указанием типа:

<script lang="ts">
  export let label: string;
  export let disabled: boolean = false;
</script>

<Button {label} {disabled} />
  • label — обязательная строка.
  • disabled — необязательное логическое значение с дефолтным значением false.

В Carbon Components Svelte это особенно важно для компонентов, таких как Button, Checkbox, TextInput, где свойства строго контролируют поведение UI.

Типизация событий

Carbon Components Svelte использует кастомные события для взаимодействия компонентов с внешним кодом. TypeScript позволяет строго типизировать события с помощью сигнатур функций:

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher<{ click: MouseEvent }>();

  function handleClick(event: MouseEvent) {
    dispatch('click', event);
  }
</script>

<Button on:click={handleClick}>Нажми меня</Button>
  • createEventDispatcher<{ click: MouseEvent }>() гарантирует, что событие click всегда передаст объект типа MouseEvent.
  • Автодополнение IDE подсказывает допустимые события и их типы.

Типизация пропсов Carbon Components Svelte

Carbon Components Svelte поставляется с набором готовых TypeScript типов для всех компонентов. Пример для TextInput:

<script lang="ts">
  import type { TextInputProps } from 'carbon-components-svelte';
  import { TextInput } from 'carbon-components-svelte';

  let inputProps: TextInputProps = {
    id: 'example-input',
    labelText: 'Введите текст',
    placeholder: 'Например, Svelte',
    invalid: false
  };
</script>

<TextInput {...inputProps} />
  • TextInputProps содержит все допустимые свойства компонента.
  • TypeScript проверяет корректность переданных значений, предотвращая ошибки времени выполнения.

Типизация состояния компонентов

Некоторые компоненты Carbon используют внутреннее состояние (например, Checkbox, Switch). Для управления состоянием в Svelte применяются реактивные переменные с типами:

<script lang="ts">
  import { Checkbox } from 'carbon-components-svelte';

  let checked: boolean = false;

  function toggle() {
    checked = !checked;
  }
</script>

<Checkbox bind:checked={checked} label="Согласен" on:change={toggle} />
  • bind:checked автоматически синхронизирует переменную с состоянием компонента.
  • Строгая типизация Boolean предотвращает случайное присвоение неправильных значений.

Типизация слотов

Компоненты Carbon поддерживают слоты для кастомизации содержимого. В TypeScript можно описывать, какие данные передаются в слот, используя generic параметры или интерфейсы:

<script lang="ts">
  interface CustomSlotProps {
    title: string;
  }

  let slotData: CustomSlotProps = { title: 'Привет, Svelte' };
</script>

<Card>
  <div slot="footer">{slotData.title}</div>
</Card>
  • Определение интерфейса CustomSlotProps гарантирует, что слот получает ожидаемые данные.
  • Это особенно важно при работе с динамическими данными и повторно используемыми компонентами.

Работа с типами событий и пропсов вместе

Сочетание типизации пропсов и событий позволяет создать полностью безопасный компонент:

<script lang="ts">
  import { Button } from 'carbon-components-svelte';
  import type { ButtonProps } from 'carbon-components-svelte';
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher<{ submit: { value: string } }>();

  let buttonProps: ButtonProps = { kind: 'primary', size: 'sm' };
  let inputValue: string = '';

  function handleSubmit() {
    dispatch('submit', { value: inputValue });
  }
</script>

<input bind:value={inputValue} placeholder="Введите значение" />
<Button {...buttonProps} on:click={handleSubmit}>Отправить</Button>
  • ButtonProps гарантирует корректность всех свойств кнопки.
  • Событие submit строго проверяется на наличие свойства value типа string.

Полезные советы при типизации Carbon Components Svelte

  1. Использовать официальные типы: Каждый компонент имеет экспортируемый интерфейс пропсов, которые следует применять для декларативной проверки типов.
  2. Типизировать события: createEventDispatcher и on:event позволяют точно определить структуру передаваемых данных.
  3. Bind с типами: bind:checked и bind:value должны строго соответствовать типам переменных.
  4. Слоты и generics: Для сложных компонентов с динамическим контентом лучше определять интерфейсы передаваемых данных.
  5. Смешанная типизация: Комбинируя пропсы, события и слоты, можно создать полностью типобезопасный компонент, снижая риск ошибок на этапе разработки.

TypeScript в связке с Carbon Components Svelte не только обеспечивает безопасную работу с компонентами, но и делает код более читаемым и сопровождаемым, минимизируя риск ошибок и повышая эффективность разработки интерфейсов.

Оглавление