TypeScript

Типы приезжают вместе с подпутём: props, emits, инстанс и токены. Плюс web-types для JetBrains, о котором мало кто знает.

Пакет написан на TypeScript, и типы не собираются в один общий .d.ts: у каждого подпути свой. Импортировали компонент — получили его типы, не потянув объявления остальных.

Что экспортирует подпуть компонента

ts

import {
  GrButton,
  type GrButtonProps,
  type GrButtonInstance,
  type GrButtonTone,
} from '@feugene/granularity/components/GrButton'

Именование одинаково у всех компонентов, и это удобнее списка:

Тип	Что описывает
`GrXProps`	Пропы компонента
`GrXEmits`	События — там, где они есть
`GrXInstance`	Публичный инстанс: то, что компонент выставил наружу
`GrXSize`, `GrXTone`, `GrXVariant`	Допустимые значения соответствующего пропа
`GrXConfigurableProps`	Подмножество пропов, настраиваемых через `GrConfigProvider`
`grXConfig`, `grXSafelist`	Значения, а не типы: конфиг компонента и его safelist для UnoCSS

GrXInstance пригодится там, где к компоненту обращаются по ссылке:

vue

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import type { GrDataTableInstance } from '@feugene/granularity/components/GrDataTable'

const table = useTemplateRef<GrDataTableInstance>('table')
</script>

Составные компоненты отдают и типы своих данных — у таблицы это GrDataColumn, GrDataTableRowKey, GrDataTableSortDir и прочее, что иначе пришлось бы описывать у себя и держать в синхронизации руками.

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

@feugene/granularity/tokens — справочник токенов как типизированные данные: grFoundationTokens, grThemeTokens, grComponentTokens, grDerivedTokens и типы к ним. Источник — те же tokens/*.json, из которых генерируется CSS, поэтому разойтись с реальными значениями они не могут.
@feugene/granularity/directives — директивы вместе с типами их аргументов.
@feugene/granularity/fileValidation — правила проверки файлов отдельным модулем: типы там основная ценность, а не побочная.

Справочник токенов намеренно не реэкспортируется из корня пакета. Это данные для документации и инструментов; приложению в рантайме они не нужны, и тянуть их в основной бандл значило бы нарушить то самое обещание, ради которого всё затевалось.

JetBrains: автодополнение из коробки

Пакет собирает и публикует web-types.json — формат, который IDE JetBrains читают сами. Ничего настраивать не нужно: после установки WebStorm, PhpStorm и IDEA знают компоненты пакета в шаблонах, их пропы, значения по умолчанию и описания.

Файл объявлен в package.json полем web-types и лежит в dist. Это готовая возможность, о которой до этой страницы не было сказано нигде.

VS Code и остальные редакторы

Среда	Что работает
VS Code + Vue (Official)	Типы из `.d.ts` и описания из JSDoc — то есть всё, кроме отдельных сниппетов
Zed, Neovim	Через тот же Vue LSP, настройки не требуется
JetBrains	Плюс `web-types.json`

Настройка проекта

Ничего специфического пакет не требует, но два пункта экономят вечер:

"moduleResolution": "bundler" (или "node16") в tsconfig.json. При "node" TypeScript не читает поле exports и не найдёт типы подпутей — импорт компонента подсветится ошибкой, хотя соберётся.
vue-tsc вместо tsc для проверки шаблонов. Пакет типизирует слоты и события, и без vue-tsc эта часть проверок не выполняется вовсе.

Если типы «не находятся» именно у подпути, а корень импортируется нормально — это почти всегда первый пункт; разбор с сообщением компилятора есть на странице типовых поломок.