Интеграция с TypeScript

ECSS генерирует типы для каждого .ecss-файла, поэтому импорт компонентов и параметров полностью типизирован — без ручного описания типов.

Как это работает

При сборке ECSS пишет декларации (.d.ts) в служебный каталог <project>/.ecss/types. Для каждого блока генерируется интерфейс параметров {Block}Params, а импорт *.ecss получает типы экспортируемых компонентов и объекта blocks.

// Сгенерировано из @block Button { @param --variant Variant; ... }
export interface ButtonParams {
  variant: 'primary' | 'secondary';
}

Настройка tsconfig

Чтобы TypeScript подхватывал сгенерированные типы, добавьте каталог .ecss/types в rootDirs — это «накладывает» его на исходники, и импорт ./Button.ecss находит свои типы:

// tsconfig.json (или tsconfig.app.json)
{
  "compilerOptions": {
    "rootDirs": [".", "./.ecss/types"]
  }
}

rootDirs используется (а не paths/include), потому что типы лежат «рядом» с исходными .ecss-файлами в виртуально-наложенном каталоге.

.gitignore

Каталог .ecss/ пересоздаётся при каждой сборке — добавьте его в .gitignore:

# .gitignore
.ecss

Отключение генерации

Генерация деклараций включена по умолчанию. Отключить — опцией generateDeclarations: false в ecss.config.

См. также

• Конфигурация — опция generateDeclarations
• Типы данных — типы параметров
• Быстрый старт — настройка проекта с нуля