Vue prop type validation object schema

Question

В React вы можете определить, что prop является объектом, а затем также определяют типы свойств этого объекта, то есть форму. В Vue это единственный способ проверить, есть ли объект определенной формы, используя функцию валидатора. Это рекомендуемая стратегия? Я уверен, что есть другие библиотеки, которые я могу использовать для обработки этой проверки, но похоже, что Vue должен иметь возможность обрабатывать.

Answer 1

Вы должны обязательно использовать TypeScript. То, что вы ожидаете, называется «аннотация типа», вы получите краткий обзор на TypeScript Quick start tutorial.

Vue.js имеет поддержку TypeScript из коробки. См. https://vuejs.org/v2/guide/typescript.html

Answer 2

Я собираюсь ответить на ответ @ Clorichel, потому что TypeScript творит чудеса для меня. Это поздний ответ, но мне нужно то же самое, что и вы: проверка схемы объекта, а не просто «is this prop a string or number?». TypeScript предлагает использование interface, которое налагает ограничения на форму объекта на этот тип (интерфейс). Так что, если у меня есть

interface GreetingSchema { 
    message: string; 
} 

делать let myGreeting = <GreetingSchema>{ message: 1234 } собирается бросить ошибку

Type '{ message: number; }' cannot be converted to type 'GreetingSchema'. 
    Types of property 'message' are incompatible. 
    Type 'number' is not comparable to type 'string'. 

расширить эту немного дальше по интеграции с Vue, вы можете использовать интерфейсы во время компиляции для выполнения проверки объекта схемы на компонентах, которые передаются от родителей к детям. Например, компонент ребенка Greeting (Greeting.vue) может быть связан со схемой объекта для реквизита, которые будут переданы ему (я использую вложенную схему, чтобы оживить):

<template> 
    <div> 
    {{message}}{{ 
     speaker 
     ? ` from ${speaker.firstName}${ 
      speaker.lastName ? ` ${speaker.lastName}` : '' 
      } 
     : '' 
    }} 
    </div> 
</template> 

<script lang="ts"> 
export default { 
    name: 'greeting', 
    props: ['message', 'speaker'], 
} 

interface SpeakerSchema { // this will be a nested schema 
    firstName: string; 
    lastName?: string; // last name of speaker is optional 
} 

export interface GreetingSchema { 
    message: string; 
    speaker?: SpeakerSchema; // speaker is optional 
} 
</script> 

You то может импортировать Greeting компонент вместе с его соответствующим GreetingSchema в родитель, чтобы гарантировать, что каждый раз, когда родитель передает его greetingData вниз к ребенку Greeting с v-bind, greetingData собирается быть связан с формой, определенной в GreetingSchema

<template> 
    <div> 
    This greeting is being displayed from the parent: 
    <greeting v-bind="greetingData" /> 
    </div> 
</template> 

<script lang="ts"> 
import Greeting, {GreetingSchema} from './Greeting' // path to Greeting.vue 

export default { 
    name: 'parent', 
    components: {Greeting}, 
    data() { 
    return { 
     greetingData: <GreetingSchema>{ 
     message: 'hi there', 
     speaker: { 
      firstName: 'myFirstName', 
      lastName: 1234 // error because it's not a string 
     }, 
     } 
    } 
    }, 
} 
</script> 

Что удивительно в том, что ошибки могут отображаться непосредственно в текстовом редакторе с правильными расширениями, даже в файлах .vue. Я использую Visual Studio Code, который имеет поддержку TypeScript из коробки, с vetur extension. Что еще удивительно, так это то, что TypeScript's home page features a presentation in which TypeScript is used with Vue's single file components!