$props() для типизированных свойств
Объявляйте свойства компонентов с деструктуризацией и типами TypeScript с помощью $props().
«$props() для типизированных свойств» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Новый API свойств
Svelte 5 вводит $props() для объявления свойств компонента с помощью деструктурирующего присваивания.
Основное использование
Деструктурируйте свойства в одном выражении.
let { name, count = 0 } = $props();Значения по умолчанию
Значения по умолчанию задаются стандартным синтаксисом деструктурирования.
let { theme = "dark" } = $props();Обязательные свойства
Свойства без значения по умолчанию обязательны. TypeScript может обеспечить это в типизированном режиме.
Типизированные свойства
Добавьте обобщённый тип TypeScript для полной безопасности типов.
let { name, count = 0 }: { name: string; count?: number } = $props();Остаточные свойства
Соберите остальные свойства с помощью синтаксиса rest.
let { name, ...rest } = $props();Дочернее содержимое и сниппеты
Свойство children содержит содержимое слота по умолчанию в виде сниппета.
let { children } = $props();Больше никакого export let
$props() заменяет старый синтаксис export let в Svelte 5.
Реактивность
Свойства реактивно обновляются, когда родитель передаёт новые значения.
Передача с разворачиванием
Передавайте остаточные свойства внутренним элементам с помощью разворачивания объекта.
<input {...rest} />Обратная совместимость
Синтаксис export let по-прежнему работает во время миграции; постепенно сочетайте оба подхода.
Быстрая проверка
Как объявить свойства в Svelte 5?
Итоги
$props() — это новый API свойств Svelte 5. Деструктурируйте свойства, задавая значения по умолчанию и типы, чтобы создавать понятные и безопасные компоненты.
Часто задаваемые вопросы
Урок «$props() для типизированных свойств» бесплатный?
Да — полный текст урока «$props() для типизированных свойств» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «$props() для типизированных свойств»?
Объявляйте свойства компонентов с деструктуризацией и типами TypeScript с помощью $props(). Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «$props() для типизированных свойств»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- $props() для типизированных свойств
- {#snippet} и {@render}
- Передача сниппетов как свойств
- Сниппеты по умолчанию и именованные сниппеты