Props типизация и валидация

Во Vue.js props используются для передачи данных от родительского компонента к дочернему. Правильная типизация и валидация props обеспечивают стабильность приложения и предотвращают ошибки, связанные с некорректными данными.

Определение props

Props можно определить несколькими способами. Наиболее простой вариант — массив строк:

export default {
  props: ['title', 'count']
}

Каждая строка в массиве указывает имя свойства, которое компонент ожидает получить. Однако такой способ не позволяет задать тип, значение по умолчанию или валидаторы.

Более продвинутый подход — использование объекта:

export default {
  props: {
    title: String,
    count: Number
  }
}

В этом случае Vue.js выполняет типовую проверку, и если переданный prop имеет другой тип, в консоли появится предупреждение.

Указание значений по умолчанию

Props могут иметь значения по умолчанию с помощью ключа default:

props: {
  title: {
    type: String,
    default: 'Без названия'
  },
  count: {
    type: Number,
    default: 0
  }
}

Если родительский компонент не передаст значение prop, Vue автоматически использует значение по умолчанию.

Валидация пропсов

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

props: {
  status: {
    type: String,
    default: 'active',
    validator(value) {
      return ['active', 'inactive', 'pending'].includes(value)
    }
  }
}

В этом примере prop status допускает только определённые строки. При передаче некорректного значения Vue выдаст предупреждение.

Множественные типы для одного prop

Один prop может принимать значения нескольких типов:

props: {
  value: [String, Number]
}

Vue позволит передавать либо строку, либо число. Это особенно удобно для компонентов с гибкой логикой обработки данных.

Обязательные props

Для указания обязательных props используется свойство required:

props: {
  username: {
    type: String,
    required: true
  }
}

Если родитель не передаст username, Vue выдаст предупреждение. Это помогает явно указывать критически важные данные для компонента.

Типы сложных объектов

Props могут быть объектами или массивами. Для проверки типов можно использовать глобальные объекты Jav * aScript:

props: {
  options: {
    type: Array,
    default: () => []
  },
  settings: {
    type: Object,
    default: () => ({})
  }
}

Для массивов и объектов обязательна функция default, чтобы каждый экземпляр компонента получал отдельное значение, а не общий объект.

Типизация через TypeScript

Во Vue 3 можно использовать TypeScript для строгой типизации props:

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    id: {
      type: Number,
      required: true
    },
    name: String
  }
})

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

Динамические значения и реактивность

Props являются реактивными. Изменение значения в родительском компоненте автоматически обновляет дочерний:

<ChildComponent :title="parentTitle" />

export default {
  props: ['title'],
  watch: {
    title(newVal) {
      console.log('Title изменился на', newVal)
    }
  }
}

Использование реактивных props позволяет строить динамичные и гибкие интерфейсы.

Итоговые рекомендации

  • Всегда указывать тип props для предотвращения ошибок.
  • Использовать default для необязательных props.
  • Применять validator для сложных правил валидации.
  • Для объектов и массивов использовать функцию default.
  • В TypeScript комбинировать типизацию props с проверками Vue для максимальной надёжности.
  • Обеспечивать обязательные props с помощью required, если данные критичны для компонента.

Эти практики позволяют создавать компоненты, которые легко поддерживать, тестировать и интегрировать в сложные приложения.

Оглавление