Preact с TypeScript

Preact — лёгкий и быстрый JavaScript-фреймворк для создания пользовательских интерфейсов, совместимый с экосистемой React. Он обеспечивает высокую производительность за счёт минимального размера и оптимизированного рендера. TypeScript добавляет строгую типизацию, улучшая масштабируемость и надежность приложений на Preact.

Использование TypeScript с Preact позволяет заранее обнаруживать ошибки типов, а также улучшает автодополнение и навигацию по коду в редакторах. Для интеграции достаточно установить соответствующие типы:

npm install preact @types/preact typescript

И настроить tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

Компоненты Preact на TypeScript

Компоненты могут быть функциональными или классовыми, но в современном Preact чаще используются функциональные компоненты с хуками. Типизация пропсов осуществляется через интерфейсы:

import { FunctionalComponent, h } from 'preact';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: FunctionalComponent<ButtonProps> = ({ label, onClick }) => (
  <button onCl ick={onClick}>{label}</button>
);

Для классовых компонентов используется Component с параметрами пропсов и состояния:

import { Component, h } from 'preact';

interface CounterProps {
  initial: number;
}

interface CounterState {
  count: number;
}

class Counter extends Component<CounterProps, CounterState> {
  state = { count: this.props.initial };

  increment = () => this.setState({ count: this.state.count + 1 });

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onCl ick={this.increment}>Increment</button>
      </div>
    );
  }
}

Хуки в Preact с TypeScript

Preact поддерживает большинство React-хуков. Наиболее распространённые: useState, useEffect, useRef, useMemo, useCallback. Типизация хука useState особенно важна для сложных объектов:

import { h } from 'preact';
import { useState } from 'preact/hooks';

interface User {
  id: number;
  name: string;
}

const UserProfile = () => {
  const [user, setUser] = useState<User | null>(null);

  return (
    <div>{user ? user.name : 'Loading...'}</div>
  );
};

Типизация колбэков и эффектов обеспечивает безопасную работу с данными и минимизирует ошибки во время компиляции.

Работа с событиями и DOM

События в Preact типизируются стандартными типами DOM из TypeScript:

const handleInput = (e: Event) => {
  const target = e.target as HTMLInputElement;
  console.log(target.value);
};

<input type="text" onIn put={handleInput} />

Использование as позволяет точно указать тип элемента и получить доступ к его свойствам без ошибок компиляции.

Контекст и провайдеры

Контекст в Preact работает аналогично React. Типизация контекста повышает безопасность передачи данных:

import { createContext } from 'preact';
import { useContext } from 'preact/hooks';

interface ThemeContextProps {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);

const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be used within ThemeProvider');
  return context;
};

Работа с рефами

Рефы в Preact с TypeScript могут быть как объектными, так и колбэковыми:

import { useRef } from 'preact/hooks';

const InputFocus = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return <input ref={inputRef} type="text" />;
};

Типизация через <HTMLInputElement> гарантирует доступ к методам элемента без ошибок.

Роутинг с preact-router

preact-router совместим с TypeScript, что позволяет типизировать параметры маршрута:

import { Router, Route } from 'preact-router';

interface UserPageProps {
  id: string;
}

const UserPage = ({ id }: UserPageProps) => <div>User ID: {id}</div>;

<Router>
  <Route path="/user/:id" component={UserPage} />
</Router>

Типизация параметров маршрута повышает стабильность приложения при навигации.

Оптимизация и производительность

Preact изначально оптимизирован для маленького размера и быстрого рендера. TypeScript помогает выявлять потенциальные ошибки до запуска, предотвращая неожиданные падения. Использование мемоизации через useMemo и useCallback с правильной типизацией снижает количество лишних рендеров и повышает производительность крупных приложений.

Стилизация компонентов

Preact позволяет использовать любые подходы к стилям: CSS, CSS-in-JS, Tailwind. С TypeScript удобно типизировать объекты стилей:

interface Styles {
  container: string;
  button: string;
}

const styles: Styles = {
  container: 'p-4 bg-gray-100',
  button: 'px-4 py-2 bg-blue-500 text-white'
};

Типизация предотвращает опечатки и гарантирует корректное использование стилей.

Интеграция с другими библиотеками

TypeScript облегчает интеграцию Preact с библиотеками управления состоянием, HTTP-клиентами и утилитами для валидации данных, обеспечивая строгую типизацию на всех уровнях. Использование интерфейсов и дженериков делает код безопасным и предсказуемым, особенно в крупных проектах.

TypeScript в Preact обеспечивает мощный инструмент для построения масштабируемых, безопасных и производительных интерфейсов с поддержкой современных практик разработки.

Оглавление