Learn TypeScript 3 by Building Web Applications

Component prop types and validation rules

In addition to their name, props can have types, as well as validation rules:

props: { 
  title: String, 
  link: String, 
  visitors: Number, 
  isVisible: Boolean, 
  messages: Array, 
  owner: Object, 
  children: [Object, String] // multiple accepted types 
} 

If a type is defined for a property, Vue will ensure that you pass the expected types before creating the component.

It is possible to use custom constructor functions as types; in that case, Vue will use an instanceof check. Unfortunately, this is much less interesting than what Angular can do with its native (compile-time) TypeScript support. However, as we'll see later, we can also use TypeScript with Vue.

Here's a more advanced example, with a required