Берлога программиста | Веб и не только

🖼️ Практическое задание для тех кто не боится: в комменты напишите тип или интерфейс для пользователя который бы отражал: ➖ Время создания ➖ Идентификатор ➖ Имя ➖ Фамилия ➖ Баланс (не важно чего, пример абстрактный) ➖ Доступы Берлога программиста | Чат

TypeScript - введение (Часть 4 - объекты) Часть 3 - тут [ссылка] Хорошо, если с примитивными типами все понятно, то что с объектами?

let user: { name: string; age: number } = {
  name: "Алекс",
  age: 25
};

TS следит за тем, чтобы: • были все нужные поля • поля имели правильные типы • не появлялось “лишнего” Например:

user.isAdmin = true; 
// ❌ Ошибка: в типе объекта нет поля isAdmin
user.age = "двадцать";
// ❌ Ошибка: age должен быть number

Интерфейсы Когда объект становится сложнее, описывать его прямо в месте использования становится неудобно. Для таких случаев есть interface:

interface User {
  name: string;
  age: number;
}

let admin: User = {
  name: "Иван",
  age: 30
};

Плюсы интерфейсов: • читаемость • автодополнение в редакторе • возможность расширения, пример ниже:

interface Admin extends User { // extends обозначает "возьми все из" User и далее ниже добавить поля
  permissions: string[];
}

Типы Это похожая на интерфейсы штука, несколько с иным объявлением, без расширения, НО использовать можно как для объектов:

type User = {
  name: string;
  age: number;
}

let admin: User = {
  name: "Иван",
  age: 30
};

Так и для примитивов чтобы как-то их ограничить, для функций и т.д.:

type ID = string | number; // | - это "или то, или то" - их можно объединять в цепочки A | B | C ... 
type Callback = (msg: string) => void;

По поводу того когда использовать интерфейсы и типы много споров, много где они взаимозаменяемы (помните что TypeScript транспилируется в JS и в рантайме типов и интерфейсов и прочих приколюх не будет, а значит при исполнении кода это не влияет НИ НА ЧТО), а потому во многом тупо дело вкуса Ибо наследование интерфейсов можно заменить так:

type Admin = User & { // & обозначает "возьми все из" User и далее ниже добавить поля -  как операция над множествами (про него ниже)
  permissions: string[];
}

Опциональные поля (optional) Не всегда у объекта должно быть строго все поля. TypeScript позволяет пометить поле как необязательное, добавив ?:

interface Product {
  title: string;
  price: number;
  description?: string; // можно, а можно и не писать
}

const p: Product = {
  title: "Рюкзак",
  price: 3500
};

Если поле есть - хорошо. Нет - тоже. Опциональность особенно удобна в формах, настройках или при работе с API. readonly — запрет на изменение

interface User {
  readonly id: number;
  name: string;
}

let user: User = {
  id: 1, // при инициализации можно
  name: "Анна"
};

user.id = 10; // ❌ Ошибка: поле только для чтения

Чаще всего readonly используют для: • идентификаторов • уникальных ключей • константных настроек Оператор объединения | (union type) Выше уже с ним столкнулись, теперь разберемся. Означает: может быть один тип ИЛИ другой.

let value: string | number;

value = "привет"; // ok
value = 42;       // ok
value = true;     // ❌ нельзя

// Типичный пример в реальных проектах - возможные варианты статусов:
type Status = "pending" | "success" | "error";

// Этот же оператор позволяет описывать объекты с разной структурой:
type User = { name: string } | { id: number };

// TypeScript требует проверки:
function print(user: User) {
  if ("name" in user) {
    console.log(user.name);
  } else {
    console.log(user.id);
  }
}

Оператор пересечения & (intersection type) Означает: должны быть ВСЕ перечисленные типы одновременно. По сути - “и то, и другое”.

type A = { name: string };
type B = { age: number };

type Person = A & B;

let p: Person = {
  name: "Алекс",
  age: 25
};

Это особенно удобно для расширения типов:

type Base = { id: number };
type Timestamps = { created: Date; updated: Date };

type Entity = Base & Timestamps;

Дальше займемся типизацией функций. Понравилось? Ставь 🔥 - чем больше их будет под постом, тем быстрее новый пост. Берлога программиста | Чат

Вышла Gemini 3 и все по 25-ому кругу хоронят программистов... Но всем стоит помнить что я писал тут https://t.me/c/1400947488/4085 Важнло еще понимать что LLM это в неком смысле статистическое распределение и оно стремится во многом к среднему, а потому ошибки неизбежны (ибо они будуттупо следвствием обучающей выборки). Где-то еще видел что самый большой массив данных в ряде моделей взят с реддита. Ну, думаю тут комментарии излишни. Хз, думаю спецы по LLM выскажут в комментах свое мнение, но как ты не чисти от бреда обучающую выборку ее достаточно большую для современных SOTA моделей не получить чтобы там гарантированно не было ошибок. А синтетические данных это во многом жеванная хвачка.

Liquid Glass Clock 🔗 Код: Codepen Берлога программиста | Чат

пока маленькая, но пройдет пару недель и основательно подразрастется 🔥🖼️

⚡️️️️️️️НАВГИАЦИЯ В КАНАЛЕ⚡️️️️️️️ Обучение TypeScript ➖Часть 1 - Введение ➖Часть 2 - Запуск ➖Часть 3 - Базовые типы React ➖Зачем нужен? Вайбкодинг ➖Нюансы вайбкодинга ➖Bolt.new ➖Qwen

Закреп будет дополняться...

Берлога программиста | Чат

⚠️ Коллеги, напоминаю что сделал чат для нашего с вами общения и обмена опытом - заходите https://t.me/+36NOAKnCVuc2ZDNi

🔥 Бесплатный вайбкодинг круче DeepSeek? Только ленивый не попробовал Cursor / Claude / ChatGPT / Deepseek... но если Ваш инструментарий ограничивается только этим, то стоит призадуматься. Недавно много шумихи наделала новая модель Qwen3-Coder, которую в ряде бенчмарков даже близко сопоставляли с Claude Sonnet 4. Поиграться можно тут: https://chat.qwen.ai/ причем бесплатно, модель выберите в левом верхнем углу (там по-умолчанию Qwen3-Max, кстати тоже серьезная модель) Я могу сказать что сам использую 30B instruct модель локально и она оставляет о себе весьма приятное впечатлени (попозже покажу локальное использование Qwen2.5-Coder-14B для полностью локальной и оффлайн-разработки и написание своих AI-агентов если будете ставить лайки 🤣). Основная же модель на 480 миллиардов параметров весьма крутая и стоит совсем недорого на OpenRouter. Так что Qwen3-Max и Qwen3-Coder плотно стоят в линейке топовых инструментов, причем о которых знают гораздо меньше людей. Берлога программиста | Чат

Accessible Emerald Green Button with Animated Border and Arrow 🔗 Код: Codepen Берлога программиста | Чат

TypeScript - введение (Часть 3 - базовые типы) Часть 2 - тут [ссылка] TypeScript в первую очередь нужен, чтобы добавить ясность - и самое простое, с чего это начинается, - примитивные типы. С этим все оооочень просто:

let age: number = 25; // числа (целые, дробные, любые);
let name: string = "Алекс"; // строки
let isActive: boolean = true; // логические true / false
let nothing: null = null;
let notDefined: undefined = undefined;

Без указания типов TypeScript и сам догадается:

let city = "Москва"; // TS сам поймёт, что это string
let price = 199.99;  // number

TypeScript умеет работать не только с заранее указанными типами данных, но и с конкретными значениями.

let direction: "left" | "right";
direction = "left";  // ✅
direction = "up";    // ❌ Тайпскрипт "даст Вам по рукам": можно только left или right

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

type Status = "pending" | "success" | "error";
let requestStatus: Status = "success";

TypeScript часто умнее, чем кажется - он сам определяет тип по присвоенному значению, это называется вывод типов (type inference):

let count = 10; // TS понял, что это number
count = "десять"; // ❌ Ошибка: ожидается число

Поэтому писать : number или : string не всегда обязательно - достаточно, чтобы TS видел значение при инициализации. Но! Если объявить переменную без значения -TS присвоит тип any (а это как снятие ремней безопасности):

let something; // тип any
something = 123;
something = "теперь строка";

⚠️ any и unknown Окей, погнали разбираться с any и unknown - двумя типами, которые часто вызывают вопросы даже у тех, кто давно пишет на TypeScript. any - это тип, который говорит: «Разработчик во всем разберется сам, отвали с проверками».

let value: any = 10;
value = "строка";
value = { a: 1 };
value = () => console.log("hi");

TS позволит абсолютно всё. И часто это кажется удобным… пока не взлетает в проде. Проблема в том, что с any теряется смысл TypeScript:

let data: any = "hello";
data.toFixed(); // 💥 Ошибка только в рантайме, TS не предупредит!

unknown - это чуть более строгий any. Он тоже позволяет принимать любые значения, НО - дальше работать с ним нельзя, пока ты не проверишь тип:

let input: unknown;

input = 123;
input = "text";
input = { x: 10 };

let value: unknown = "hello";

value.toUpperCase(); // ❌ Ошибка

if (typeof value === "string") {
  value.toUpperCase(); // ✅ теперь можно
}

Как и когда их лучше использовать мы поговорим дальше, НО пока не изучите базу лучше не трогать эти типы, они нужны иногда как "времянка" в ряде случаев. Понравилось? Ставь 🔥 - чем больше их будет под постом, тем быстрее едем дальше. Берлога программиста | Чат

а то понавайбкодят...

👆 «Полноценно» это если что умение полноценное приложение с управлением состоянием разработать, а не просто знаете что он есть и пробовали что-то пописать