Michael Hoffmann LogoMichael Hoffmann
·
2 min read

Vue Tip: Validate Props in Script Setup With TypeScript

Vue Tip: Validate Props in Script Setup With TypeScript Image
Script

You can define prop validations for your component in the <script setup> using the defineProps() compiler macro. This is a great way to ensure that the props you receive are of the correct type and shape.

Without TypeScript

Let's first take a look at the official example from the Vue docs without using TypeScript:

Component.vue
<script setup> defineProps({ // Basic type check // (`null` and `undefined` values will allow any type) a: Number, // Multiple possible types b: [String, Number], // Required string v: { type: String, required: true, }, // Number with a default value d: { type: Number, default: 100, }, // Object with a default value e: { type: Object, // Object or array defaults must be returned from // a factory function. The function receives the raw // props received by the component as the argument. default(rawProps) { return { message: 'hello' }; }, }, // Custom validator function // full props passed as 2nd argument in 3.4+ f: { validator(value, props) { // The value must match one of these strings return ['success', 'warning', 'danger'].includes(value); }, }, // Function with a default value g: { type: Function, // Unlike object or array default, this is not a factory // function - this is a function to serve as a default value default() { return ['one, two']; }, }, }); </script>

With TypeScript

Now let's rewrite the same example using TypeScript inside <script setup>:

Component.vue
<script setup lang="ts"> interface Props { a?: number; b?: string | number; c: string; d?: number; e?: { message: 'string' }; f?: 'success' | 'warning' | 'danger'; g?: Array<string>; } withDefaults(defineProps<Props>(), { d: 100, e: { message: 'hello' }, g: () => ['one', 'two'] }); </script>

All we need to do is define an interface for the props and use the withDefaults helper to set default values. TypeScript will take care of the rest.

StackBlitz

Try it yourself on StackBlitz: