Use the proper type when typing a prop in Vue.js

Once again, I didn’t take me long to understand what I was missing, as ESLint errors are explicit.

I encountered this when I was coding the lesson 35 of the masterclass about Vue.js provided by the awesome team of VueSchool.io.

When you type a prop, don’t use String but use string primitive type.

The first is a wrapper object, but to make ESLint happy, you must use the primitive.

For example, you should avoid this declaration:

1
2
3
4
5
6


const props = defineProps<{ id?: String; edit?: boolean }>();

//eslint will complain on `props.id`
if (props.id) {
  return getUserById(props.id);
}

The same goes for:

number and Number.
boolean and Boolean.