Оператор spread в массивах и объектах
Раскрывайте значения, сохраняя точные типы
«Оператор spread в массивах и объектах» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.
Разворачивание значений
Оператор разворачивания ... копирует элементы массива или свойства объекта в новый массив или объект. TypeScript точно отслеживает результирующий тип, что особенно важно для неизменяемых обновлений.
Разворачивание массивов
Разверните два массива в новый, чтобы объединить их. Тип элементов результата является объединением типов элементов обоих исходных массивов.
const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]Сочетание разворачивания и литералов
Можно чередовать разворачиваемые элементы с отдельными значениями. Порядок сохраняется точно так, как он записан.
const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]Типы разворачиваемых элементов
Если источники разворачивания имеют разные типы элементов, результатом становится массив с объединением этих типов. Укажите аннотацию или позвольте выводу типов выполнить эту работу.
const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)Разворачивание объектов
Разворачивание объекта копирует его собственные перечисляемые свойства в новый объект. Тип результата объединяет структуры исходных объектов.
const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }Переопределение свойств при разворачивании
Если ключи совпадают, побеждает последний. Разверните объект, а затем переопределите отдельные поля — это основа неизменяемых обновлений.
const user = { name: "Ada", age: 36 }
const older = { ...user, age: 37 }
console.log(older.age) // 37Порядок определяет победителя
Приоритет свойств определяется порядком источников. Размещайте переопределения после разворачивания, чтобы они имели приоритет; если разместить их перед ним, разворачивание перезапишет их.
const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came lastТип переопределённого свойства
Если переопределение изменяет тип свойства, результирующий тип отражает новый тип. TypeScript сужает тип до последнего вхождения.
const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())Оператор расширения выполняет поверхностное копирование
Оператор расширения копирует данные только на один уровень. Вложенные объекты передаются по ссылке, поэтому изменение вложенного поля затрагивает обе копии. Для более глубокого копирования примените оператор расширения и к вложенному объекту.
const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared referenceОператор расширения и модификатор только для чтения
Применение оператора расширения к массиву или объекту readonly создаёт новую изменяемую копию. Модификатор readonly не переносится при расширении, поскольку Вы создаёте новое значение.
const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4Шаблон неизменяемого обновления
Оператор расширения — идиоматичный способ обновить состояние без изменения исходного объекта: скопируйте старый объект, переопределите изменившиеся поля и верните новый объект.
interface State { count: number; name: string }
function increment(s: State): State {
return { ...s, count: s.count + 1 }
}
console.log(increment({ count: 1, name: "x" }))Быстрая проверка
Проверьте, насколько хорошо Вы понимаете типы и приоритеты оператора расширения.
Повторение
Оператор расширения копирует элементы массива или свойства объекта в новое значение. Расширение массива объединяет элементы, формируя объединённый тип элементов; расширение объекта объединяет структуры, а при совпадении ключей используется последнее вхождение. Оператор расширения выполняет поверхностное копирование — вложенные объекты остаются общими, — и создаёт новые изменяемые значения даже из источников readonly. Это идиоматичный шаблон неизменяемого обновления.
Часто задаваемые вопросы
Урок «Оператор spread в массивах и объектах» бесплатный?
Да — полный текст урока «Оператор spread в массивах и объектах» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Оператор spread в массивах и объектах»?
Раскрывайте значения, сохраняя точные типы Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Оператор spread в массивах и объектах»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Остаточные параметры функций
- Оператор spread в массивах и объектах
- Остаточные элементы кортежей
- Типизация функций с переменным числом аргументов