> Как задать значение по умолчанию для defineProps во Vue с TypeScript (Vue.js)

Короткий ответ

Во Vue 3 с TypeScript значение по умолчанию для defineProps задаётся через опцию default в объекте, передаваемом вторым аргументом. Для типизированных props используется синтаксис defineProps<{ prop?: Type }>() с withDefaults для указания значений по умолчанию. Это обеспечивает корректную типизацию и runtime-значения.

Подробное объяснение

defineProps - это макрос компилятора Vue, который декларирует props компонента. При использовании TypeScript есть два подхода: runtime-декларация (объект с типами) и чисто типовая декларация (generic). Для задания значений по умолчанию в типовом подходе применяется withDefaults, так как TypeScript не может вывести runtime-значения из типа. withDefaults принимает результат defineProps и объект с дефолтами, сохраняя типизацию. В runtime-подходе default указывается прямо в объекте prop'а. Важно: withDefaults работает только с типовым синтаксисом и не влияет на типы - он просто добавляет runtime-логику.

На практике

Для типового подхода используйте withDefaults после defineProps. Для runtime-подхода - объект с type и default. Выбор зависит от потребности в строгой типизации: типовой подход даёт лучший автокомплит и проверки, но требует дополнительного импорта. Runtime-подход проще для смешанных проектов. Если prop обязателен, значение по умолчанию не нужно. Для объектов и массивов default должен быть функцией-фабрикой, чтобы избежать мутаций.

Пример кода

TYPESCRIPT
// Типовой подход с withDefaults
import { defineProps, withDefaults } from 'vue'

interface Props {
  title?: string
  count?: number
  items?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  title: 'Default Title',
  count: 0,
  items: () => [] // фабрика для объектов/массивов
})

// Runtime-подход
const props = defineProps({
  title: {
    type: String,
    default: 'Default Title'
  },
  count: {
    type: Number,
    default: 0
  },
  items: {
    type: Array as PropType<string[]>,
    default: () => []
  }
})

Как отвечать на собеседовании

Начни с чёткого ответа: используй withDefaults для типового синтаксиса. Объясни разницу между runtime и типовым подходами, упомяни фабрики для объектов. Покажи пример кода. Подчеркни, что withDefaults сохраняет типы, а runtime-подход требует PropType для сложных типов. Будь готов обсудить trade-off: типовой подход строже, но требует больше кода.

Что проверяет интервьюер

Интервьюер оценивает знание макросов Vue 3, понимание TypeScript в контексте Vue, умение работать с типами и runtime-логикой. Также проверяется способность объяснить разницу между подходами и избежать типичных ошибок, таких как мутация общих объектов.

Типичные ошибки

• Забывают про фабрику для объектов/массивов, что приводит к мутациям между экземплярами.
• Используют withDefaults с runtime-синтаксисом - это не работает.
• Указывают default для обязательных props, что избыточно.
• Не импортируют withDefaults из 'vue', полагаясь на автоматическую регистрацию.