13.01.2026 18:15
🛡 TypeScript: Почему satisfies круче обычного объявления типа?
🛡 TypeScript: Почему satisfies круче обычного объявления типа?
Многие по привычке пишут так: const config: Config = { ... }.
Это работает для валидации, но у этого подхода есть минус - Type Widening (расширение типов). Вы теряете точность выведенного типа в угоду соответствию интерфейсу.
Начиная с TS 4.9, оператор satisfies решает эту проблему. Он проверяет, что объект соответствует типу, но сохраняет его точную структуру.
В чем разница?
❌ Классический подход (потеря точности):
type Routes = Record<string, string | string[]>;
// Мы явно указали тип Routes
const nav: Routes = {
home: "/",
admin: ["/users", "/posts"]
};
// TS думает, что nav.home — это 'string | string[]'
// ОШИБКА: Property 'toUpperCase' does not exist on type 'string | string[]'
nav.home.toUpperCase();
✅ Используем satisfies (сохраняем контекст):
const nav = {
home: "/",
admin: ["/users", "/posts"]
} satisfies Routes;
// Теперь TS знает:
// 1. nav соответствует Routes (опечатки не пропустит)
// 2. nav.home — это конкретно string
// 3. nav.admin — это конкретно string[]
// РАБОТАЕТ!
nav.home.toUpperCase();
nav.admin.map(path => path);
Когда использовать?
Всегда, когда вы хотите проверить соответствие контракту (конфиги, темы, палитры цветов), но при этом хотите продолжать работать с конкретными значениями этого объекта, а не с его общим интерфейсом.
👉 @frontend_1
Многие по привычке пишут так: const config: Config = { ... }.
Это работает для валидации, но у этого подхода есть минус - Type Widening (расширение типов). Вы теряете точность выведенного типа в угоду соответствию интерфейсу.
Начиная с TS 4.9, оператор satisfies решает эту проблему. Он проверяет, что объект соответствует типу, но сохраняет его точную структуру.
В чем разница?
❌ Классический подход (потеря точности):
type Routes = Record<string, string | string[]>;
// Мы явно указали тип Routes
const nav: Routes = {
home: "/",
admin: ["/users", "/posts"]
};
// TS думает, что nav.home — это 'string | string[]'
// ОШИБКА: Property 'toUpperCase' does not exist on type 'string | string[]'
nav.home.toUpperCase();
✅ Используем satisfies (сохраняем контекст):
const nav = {
home: "/",
admin: ["/users", "/posts"]
} satisfies Routes;
// Теперь TS знает:
// 1. nav соответствует Routes (опечатки не пропустит)
// 2. nav.home — это конкретно string
// 3. nav.admin — это конкретно string[]
// РАБОТАЕТ!
nav.home.toUpperCase();
nav.admin.map(path => path);
Когда использовать?
Всегда, когда вы хотите проверить соответствие контракту (конфиги, темы, палитры цветов), но при этом хотите продолжать работать с конкретными значениями этого объекта, а не с его общим интерфейсом.
👉 @frontend_1