Как правильно указывать типы при деструктуризации объектов в TypeScript?

Основной синтаксис типизации деструктуризации

Вы на правильном пути. TypeScript требует указывать тип для всего деструктуризируемого объекта, а не для каждого свойства отдельно. Вот корректный синтаксис:

function createUser({name, age, email}: {name: string; age: number; email: string}) {
  console.log(`Создан пользователь ${name}, возраст ${age}, email ${email}`);
}

// Использование
createUser({name: 'Иван', age: 30, email: 'ivan@example.com'});

Необязательные свойства

Если какое-то свойство может отсутствовать, используйте знак вопроса ?:

function createUser({
  name,
  age,
  email
}: {
  name: string;
  age?: number;      // необязательное свойство
  email?: string;    // необязательное свойство
}) {
  console.log(`Имя: ${name}`);
  if (age) console.log(`Возраст: ${age}`);
}

Вынос типа в отдельный интерфейс

Лучшая практика — выносить сложные типы в отдельные интерфейсы или типы. Это делает код чище и переиспользуемым:

interface UserInput {
  name: string;
  age?: number;
  email?: string;
}

function createUser({name, age, email}: UserInput) {
  // ...
}

// Можно использовать тот же интерфейс в другом месте
function updateUser({name, age}: UserInput) {
  // ...
}

Вложенная деструктуризация

Для вложенных объектов нужно описать полную структуру. Есть два подхода:

Подход 1: Интерфейс с вложенностью

interface Address {
  city: string;
  street: string;
}

interface UserWithAddress {
  name: string;
  address: Address;
}

function printAddress({name, address: {city, street}}: UserWithAddress) {
  console.log(`${name} живёт на улице ${street} в городе ${city}`);
}

// Использование
printAddress({
  name: 'Иван',
  address: {city: 'Москва', street: 'Тверская'}
});

Подход 2: Прямая типизация в параметрах

function printAddress({
  name,
  address: {city, street}
}: {
  name: string;
  address: {city: string; street: string};
}) {
  // ...
}

Значения по умолчанию

Можно комбинировать деструктуризацию со значениями по умолчанию. Тип всё равно указывается для объекта:

function createUser({
  name,
  age = 18,        // значение по умолчанию
  email = 'no-email@example.com'
}: {
  name: string;
  age?: number;
  email?: string;
}) {
  // age будет number (не undefined), если не передан
}

Общие рекомендации

• Всегда выносите типы в интерфейсы — это улучшает читаемость и переиспользование
• Используйте ? для необязательных свойств — это явно показывает намерение
• Не бойтесь вложенных типов — TypeScript отлично с ними работает
• Помните про значения по умолчанию — они автоматически меняют тип с undefined | T на T

Если вы используете деструктуризацию не в параметрах функции, а в теле, синтаксис тот же:

const user: UserInput = {name: 'Иван', age: 30};
const {name, age} = user; // TypeScript сам выведет типы из UserInput

Надеюсь, теперь всё стало понятно! Главное правило: тип пишется после закрывающей фигурной скобки деструктуризации и описывает весь объект целиком.

type UserParams = {
  name: string;
  age: number;
  email?: string;
};

function createUser({name, age, email}: UserParams) {
  // ...
}

function processCoordinates([x, y, z]: [number, number, number]) {
  console.log(`X: ${x}, Y: ${y}, Z: ${z}`);
}

// Или с rest оператором
function processFirstTwo([first, second, ...rest]: number[]) {
  console.log(first, second, rest);
}

interface ApiResponse {
  user_name: string;
  user_age: number;
}

function processUser({user_name: userName, user_age: userAge}: ApiResponse) {
  // Теперь доступны userName и userAge
  console.log(userName, userAge);
}