TGViewer
React React @react_lib · 2.66K subscribers
Post #660 1.19K
📌 5 крутых фич TypeScript, о которых ты мог не знать

TypeScript — это не просто строгая типизация, но и мощный инструмент, который может сделать твой код чище и безопаснее. Сегодня покажу 5 полезных возможностей, которые ты мог упустить!

1️⃣ satisfies — Гарантия соответствия
Часто бывает, что мы определяем объект с определёнными ключами, но хотим, чтобы TypeScript проверил, соответствуют ли они ожидаемой схеме. Вот где пригодится satisfies:


type Theme = "light" | "dark";

const config = {
theme: "light",
debug: true,
} satisfies { theme: Theme; debug: boolean };

// Теперь TypeScript гарантирует, что `theme` всегда будет соответствовать "light" | "dark"


2️⃣ keyof + typeof — Безопасные ключи
Если у тебя есть объект и ты хочешь работать с его ключами безопасно, эта комбинация спасает:


const user = {
name: "Jhon",
age: 30,
};

type UserKeys = keyof typeof user; // "name" | "age"

const key: UserKeys = "name"; // ✅ TypeScript гарантирует, что это корректный ключ


3️⃣ Extract<> и Exclude<> — Фильтрация типов
Эти утилиты позволяют выделять или исключать типы из union-типов:


type EventType = "click" | "hover" | "scroll";
type MouseEvents = Extract<EventType, "click" | "hover">; // "click" | "hover"
type NonMouseEvents = Exclude<EventType, "click" | "hover">; // "scroll"


4️⃣ as const — Заморозка значений
Если тебе нужно, чтобы объект или массив стали неизменяемыми (и сохранили точные значения), используй as const:


const roles = ["admin", "user", "guest"] as const;

type Role = (typeof roles)[number]; // "admin" | "user" | "guest"


5️⃣ ReturnType<> — Получение типа возвращаемого значения
Если у тебя есть функция, и тебе нужно определить её возвращаемый тип, ReturnType<> сделает это за тебя:


function getUser() {
return { name: "Jhon", age: 30 };
}

type User = ReturnType<typeof getUser>; // { name: string; age: number }



✍️ @React_lib
  • 👍 8
  • 🔥 1
More from @react_lib
  1. Sep 11, 2026🚨 Избегай монолитных компонентов, которые объединяют в себе отображение, управление состо…
  2. Sep 7, 2026❌ Избегайте использования нескольких переменных состояния для отслеживания статуса. ✅ Вмес…
  3. Aug 31, 2026Сегодня написал пост на тему, которая регулярно бьёт по скорости разработки: почему React-…
  4. Aug 24, 2026❌ Избегайте «прокидывания» пропсов (prop-drilling) для расширения компонентов ✅ Вместо это…
  5. Aug 23, 2026🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.r…
  6. Aug 21, 2026⚛️ Реактивность - это просто (и всего 35 строк кода) Мы часто воспринимаем реактивность в…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →