#typescript

Чем отличается тип unknown от типа any в TypeScript?

❌ В TypeScript тип any предоставляет полную свободу для работы с переменной, но при этом теряется всякая защита типов. Например, если переменной с типом any присвоено значение, TypeScript не будет проверять, можно ли вызывать методы или использовать свойства этой переменной:

let data: any = "Hello";
// Ошибка будет только на этапе выполнения, а не при компиляции
console.log(data.toFixed()); // TypeError: data.toFixed is not a function

✔️ Тип unknown — это более безопасная альтернатива. Как и any, он позволяет присваивать переменной любое значение, но при попытке взаимодействия с этой переменной TypeScript требует явных проверок типа. Это защищает программу от неожиданного поведения. Например:

let value: unknown = "Hello";
// TypeScript не позволяет вызывать методы без проверки типа

console.log(value.toFixed()); // Ошибка на этапе компиляции

if (typeof value === "number") {
    console.log(value.toFixed()); // Теперь безопасно
}

Таким образом, unknown рекомендуется использовать в ситуациях, когда тип значения заранее неизвестен (например, при работе с пользовательскими вводаами или данными API). Этот тип помогает создавать более безопасный код, в отличие от any, который приводит к ошибкам в неожиданых местах.

Ресурсы для изучения:
📔 Статья
📱 Видео
👉 Новости 👉 Платформа

#typescript

🔤 Что такое пересечение типов (intersection types) в TypeScript, и как оно используется?

Пересечение типов (intersection types) — это способ объединять два или более типов в один. В отличие от объединения типов (union types), которое позволяет переменной быть одного из нескольких типов, пересечение типов требует, чтобы переменная соответствовала сразу всем объединяемым типам.

Пересечение типов создается с помощью оператора & и используется для описания объектов, которые должны одновременно быть человеком и работником:

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

interface Employee {
    employeeId: number;
    position: string;
}

// Пересечение типов Person и Employee
type worker = Person & Employee;
const worker: worker = {
    name: "John",
    age: 35,
    employeeId: 12345,
    position: "Developer"
};

Здесь тип worker включает все свойства типа Person и Employee. Объект worker должен содержать как имя и возраст (от Person), так и идентификатор сотрудника и должность (от Employee).


❗️ Важно понимать, что если в объединяемых типах есть противоречивые типы — например, если одно и то же свойство имеет разные типы — TypeScript выдаст ошибку. Рассмотрим пример:

interface Cat {
    name: string;
    purrs: boolean;
}

interface Dog {
    name: string;
    barks: boolean;
    purrs: number; // Противоречивое свойство
}

// TypeScript выдаст ошибку, так как типы свойства purrs различаются
type Pet = Cat & Dog;

🟰 Пересечение типов полезно, когда нужно описать сложные объекты, которые должны удовлетворять сразу нескольким требованиям. Это позволяет создать строгую типизированные данные, избегающие ошибок при использовании объекта, содержащего множество свойств.


Ресурсы для изучения:
📔 Статья
📱 Видео
👉 Новости 👉 Платформа

#typescript

👩‍💻 Как у вас обстоят дела с TypeScript?

Предлагаю выделить вечер и наконец-то на реальных примерах понять его. Ну или освежить знания 👀

📹 Видео

💬 Новости

🎓 Платформа

#typeScript

🔎 Что такое enum в TypeScript и как его использовать?

Enum - это способ создать набор именованных констант в TypeScript.

// Создаём enum со статусами заказа
enum OrderStatus {
  New,           // 0
  Processing,    // 1
  Shipped,       // 2
  Delivered      // 3
}

// Используем его
let status = OrderStatus.New;

// Проверяем статус
if (status === OrderStatus.New) {
  console.log("Новый заказ!");
}

// Можно получить имя по значению
console.log(OrderStatus[2]); // "Shipped"

По сути, enum помогает заменить магические числа или строки на понятные имена, что делает код более читаемым и предотвращает ошибки. TypeScript автоматически проверяет, что вы используете только допустимые значения из перечисления.


Ресурсы для изучения:

➡️ Вопрос

💬 Новости

🎓 Платформа

#typescript

TypeScript: основы типизации

TypeScript добавляет к JavaScript статическую типизацию, позволяя обнаруживать ошибки до запуска кода.


✅Базовые типы

- string: для текста (`let name: string = 'Алексей'`)
- number: для чисел (`let age: number = 25`)
- boolean: для true/false (`let isActive: boolean = true`)
- null/undefined: для отсутствия значения
- any: любой тип (избегайте без необходимости)


✅Интерфейсы

Интерфейсы определяют структуру объектов:
- Задают обязательные и опциональные (`?`) свойства
- Могут содержать свойства только для чтения (`readonly`)
- Используются для типизации объектов и классов


✅Type Aliases (Псевдонимы типов)

Создают собственные имена для типов:
- Объединяют типы через | (или) и & (и)
- Ограничивают значения конкретным набором
- В отличие от интерфейсов, нельзя "дополнить" новыми свойствами


✅Массивы и Кортежи

- Массивы: number[] или Array<string>
- Кортежи: массивы с фиксированным порядком разных типов


✅Функции

TypeScript позволяет типизировать:
- Параметры функции
- Возвращаемое значение
- Опциональные параметры
- Параметры со значениями по умолчанию


✅Generics (Обобщения)

Позволяют писать гибкий типобезопасный код:
- Создают универсальные функции и классы
- Сохраняют информацию о типе при работе с разными типами
- Используют синтаксис <T> для обозначения "любого типа"


✅Enum (Перечисления)

Определяют набор именованных констант:
- Улучшают читаемость кода
- Бывают числовые, строковые и смешанные
- Используются для фиксированных наборов значений


✅Utility Types

Встроенные типы для трансформации существующих типов:
- Partial<T>: все свойства становятся необязательными
- Required<T>: все свойства обязательные
- Readonly<T>: все свойства только для чтения
- Pick<T, K>: выбирает подмножество свойств
- Omit<T, K>: исключает указанные свойства


Советы для начинающих

1. Строгие проверки: Используйте --strictNullChecks для поиска ошибок
2. Вывод типов: Позволяйте TypeScript определять типы автоматически
3. Избегайте any: Используйте только в крайних случаях
4. Интерфейсы vs типы: Интерфейсы для объектов, типы для функций и объединений
5. IDE: VS Code предоставляет отличные инструменты для работы с TypeScript


Ресурсы для изучения:

💬 Новости

🎓 База вопросов

🎙 Собеседование в компанию Точка

На позицию Middle Frontend Разработчик

Большая часть собеседования состоит из кодинга в перемешку с теоретическими вопросами.

1. В каком порядке будут выведены логи?

console.log('1')
Promise.resolve('2')
    .then((res) => {
      console.log(res);
      
      Promise.resolve('3')
        .then((res) => {
          console.log(res);
          setTimeout(() => {console.log('4')}, 0);
        })    
    })
    .then((res) => console.log(res))
    .finally((res) => {
      console.log(res);
      setTimeout(() => {console.log('5')}, 0);
    });
console.log('6');

2. А если изменив первый Promise?

console.log('1')
Promise.reject('2')
    .then((res) => {
      console.log(res);
      
      Promise.resolve('3')
        .then((res) => {
          console.log(res);
          setTimeout(() => {console.log('4')}, 0);
        })    
    })
    .catch((res) => console.log(res))
    .then((res) => console.log(res))
    .finally((res) => {
      console.log(res);
      setTimeout(() => {console.log('5')}, 0);
    });
console.log('6');

3. Что выведет этот код?

function foo() {
  const x = 10;

  return {
    x: 20,
    bar: () => {
      console.log(this.x)
    },
    baz: function() {
      console.log(this.x)
    }
  };
}

const obj1 = foo();

obj1.bar();    // ...
obj1.baz();       // ...

const obj2 = foo.call({ x: 30 });
obj2.bar();    // ..
obj2.baz();       // ...

4. Напиши и типизируй функцию для определения типа фигуры

type Rectangle = {
  width: number ;
  height: number ;
};

type Circle = {
  radius: number;
};

type AvailableFigure = Rectangle | Circle;

function isCircle(figure) {
  ...
}

function getCircleArea(figure: Circle): number {
    return Math.pow(figure.radius, 2) * Math.PI
}

function getRectangleArea(figure: Rectangle): number {
    return figure.width * figure.height
}

function getArea(figure: AvailableFigure): number {
  return isCircle(figure)
    ? getCircleArea(figure)
    : getRectangleArea(figure);
}

5. Напиши нативный Pick<>

type MyPick<T, U extends keyof T> = {
    [key in U]: T[key] 
}

Все эти задачи мы разбирали в видео:
- 5 типичных задач по TypeScript для Frontend собеседований
- Разбор задач по Event Loop с собеседований
- 5 типичных задач по JavaScript на собеседовании

#interview

#TypeScript

Всем привет! 👋

Сегодня разберем 5 типичных задач по TypeScript на собесах

Жми плей, и все станет понятнее


🔎🔎🔎🔎🔄

#️⃣Видео

#️⃣Новости

#️⃣База вопросов

#TypeScript

🚩Чем отличается тип unknown от типа any в TypeScript?

В TypeScript тип any предоставляет полную свободу для работы с переменной, но при этом теряется всякая защита типов.

let data: any = "Hello";
// Ошибка будет только на этапе выполнения, а не при компиляции
console.log(data.toFixed()); // TypeError: data.toFixed is not a function

Тип unknown — это более безопасная альтернатива.

Как и any, он позволяет присваивать переменной любое значение, но при попытке взаимодействия с этой переменной TypeScript требует явных проверок типа. Это защищает программу от неожиданного поведения:

let value: unknown = "Hello";
// TypeScript не позволит вызвать метод без проверки типа
console.log(value.toFixed()); // Ошибка на этапе компиляции

if (typeof value === "number") {
  console.log(value.toFixed()); // Теперь это безопасно
}

Основные отличия:

🖇 any — отключает все проверки типов, ошибки только в runtime

🖇 unknown — требует проверки типов перед использованием, ошибки на этапе компиляции


❗️ unknown рекомендуется когда тип значения заранее неизвестен (например, при работе с пользовательскими вводами или данными API).


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов