Конфигурация TypeScript

Fresh — современный фреймворк для разработки веб-приложений на JavaScript и TypeScript, построенный на Deno. Поддержка TypeScript в Fresh реализована из коробки, что позволяет писать безопасный и масштабируемый код без дополнительных инструментов компиляции.

Инициализация проекта с TypeScript

При создании проекта Fresh с TypeScript используется команда:

deno run -A -r https://fresh.deno.dev my-app

По умолчанию Fresh создаёт проект с поддержкой TypeScript. В структуре проекта появляются файлы с расширением .ts и конфигурационный файл tsconfig.json.

Конфигурационный файл tsconfig.json

Файл tsconfig.json управляет поведением компилятора TypeScript. В Fresh он содержит оптимальные настройки для веб-разработки:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "$fresh/runtime",
    "noEmit": true,
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowJs": false
  },
  "include": ["./**/*.ts", "./**/*.tsx"],
  "exclude": ["node_modules"]
}

Ключевые параметры:

  • target — указывает версию ECMAScript для компиляции. ESNext обеспечивает поддержку последних возможностей языка.
  • module — формат модулей, ESNext совместим с Deno.
  • strict — включает строгую проверку типов.
  • jsx и jsxImportSource — настройки JSX для Fresh, обеспечивают корректную работу с компонентами.
  • noEmit — TypeScript проверяет типы, но не создаёт отдельные .js файлы, так как Deno компилирует их напрямую.
  • moduleResolution — используется схема Node для поиска модулей, что важно при работе с сторонними библиотеками.
  • allowJs — отключение компиляции JavaScript-файлов, фокус на TypeScript.

Структура TypeScript-файлов в Fresh

Проект разделяется на несколько типов файлов:

  • routes/*.tsx — маршруты приложения, каждый файл соответствует URL.
  • islands/*.tsx — интерактивные компоненты, которые компилируются отдельно для клиента.
  • components/*.tsx — статические компоненты без состояния или с серверной логикой.
  • utils/*.ts — вспомогательные функции, общие для сервера и клиента.

Каждое расширение .tsx используется там, где присутствует JSX. В чистых .ts файлах JSX не используется.

Настройка типов для данных

TypeScript позволяет создавать строгие типы для props компонентов и данных API:

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

export function UserCard({ user }: { user: User }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

Использование интерфейсов и типов обеспечивает проверку на этапе компиляции и упрощает автодополнение в редакторах.

Импорт модулей и алиасы

Fresh позволяет использовать абсолютные пути для модулей. В tsconfig.json можно настроить paths:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"],
      "@islands/*": ["islands/*"]
    }
  }
}

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

import { UserCard } from "@components/UserCard.tsx";

Это упрощает структуру импорта и делает код более читаемым.

Проверка типов и интеграция с Deno

Deno автоматически проверяет TypeScript-файлы при запуске:

deno task start

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

deno check .

Настройка линтеров и форматирования

Fresh рекомендует использовать встроенные инструменты Deno:

  • deno lint — проверка стиля и потенциальных ошибок.
  • deno fmt — автоматическое форматирование кода.

Конфигурация этих инструментов хранится в deno.json и может быть расширена под проектные стандарты.

Поддержка модулей с типами

Для сторонних модулей, загружаемых через URL, TypeScript автоматически подхватывает типы, если они экспортируются вместе с библиотекой. В противном случае можно использовать @types-аналог, но в Deno чаще применяются встроенные декларации.

Рекомендации по структуре TypeScript-кода

  • Разделять серверные и клиентские функции, чтобы минимизировать лишнюю загрузку на клиент.
  • Использовать интерфейсы для всех props и данных API.
  • Сохранять чистую типизацию на всех уровнях приложения: маршруты, острова, утилиты.
  • Избегать any и максимально использовать строгие типы для предотвращения ошибок в рантайме.

TypeScript в Fresh обеспечивает сочетание строгой проверки типов, гибкости JSX и нативной поддержки Deno, что делает код безопасным, читаемым и легко поддерживаемым.

Оглавление