Типы данных

Типы, которые используются в @param и @const.

boolean

Булевое значение: true или false.

@param --disabled boolean;
@param --elevated? boolean: true;

В TypeScript имеет тип boolean.

string

Строковый литерал в одинарных или двойных кавычках.

@param --label? string: "Submit";
@param --href string;

В TypeScript имеет тип string.

number

Числовое значение — целое или дробное — без единицы измерения.

@param --columns number;
@param --opacity? number: 1;

В TypeScript имеет тип number.

unit

CSS-значение с единицей измерения.

@param --size unit;
@param --gap? unit: 0.5rem;

В TypeScript это строковый литерал вида "16px", "1.5rem" — число с допустимой единицей измерения.

Основные единицы:

Категория	Единицы
Абсолютные	px, cm, mm, in, pt, pc
Относительные (шрифт)	em, rem, ex, ch, cap, lh
Вьюпорт	vw, vh, vmin, vmax, dvw, dvh, svw, svh, lvw, lvh
Контейнер	cqw, cqh, cqi, cqb, cqmin, cqmax
Углы	deg, grad, rad, turn
Время	s, ms
Частота	hz, khz
Разрешение	dpi, dpcm, dppx
Сетка	fr
Проценты	%

color

CSS-цвет в виде hex-кода или цветовой функции.

@param --bg color;
@param --accent? color: #646cff;

В TypeScript имеет тип string. Корректность формата проверяется на этапе компиляции.

Допустимые форматы:

• Hex: #rgb, #rrggbb, #rrggbbaa
• Функции: rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(), color-mix()

WARNING

Именованные цвета CSS (red, blue, transparent) не поддерживаются. Используйте hex-код или цветовую функцию.

null

Специальное значение отсутствия. Обычно не пишется явно — используется как неявный дефолт для опциональных параметров @param.

Знак ? после имени параметра делает его опциональным, а дефолтом становится null:

@param --label? string;    // дефолт: null
@param --size? unit;       // дефолт: null

В TypeScript тип опционального параметра расширяется до T | null:

export interface CardParams {
  label?: string | null;
  size?: `${number}px` | `${number}rem` /* …и другие единицы */ | null;
}

enum

Ссылка на @enum — параметр принимает одно из объявленных значений. В качестве типа указывается имя @enum.

@enum Variant {
  values: "primary", "secondary", "danger";
}

@block Button {
  @param --variant Variant;
  @param --tone? Variant: "primary";
}

В TypeScript генерируется union-тип из значений перечисления:

export interface ButtonParams {
  variant: 'primary' | 'secondary' | 'danger';
  tone?: 'primary' | 'secondary' | 'danger' | null;
}

enum используется только в @param. В @const ссылки на @enum не поддерживаются.

См. также

• @param — объявление параметров блока
• @const — именованные константы
• @enum — объявление перечислений
• @if — использование типов в условиях