How do I use props in Vue with TypeScript?

How do I use props in Vue with TypeScript?

In Vue with TypeScript, you can define props in your component using the defineProps function. Here's a basic example:

<script lang="ts">
import { defineComponent, defineProps } from 'vue';

export default defineComponent({
  setup() {
    const props = defineProps<{ message: string }>();
    return { props };
  }
});
</script>

This defines a prop called message of type string.

Can I define default values for props?

Yes, you can define default values for props in Vue with TypeScript. You can use the withDefaults function. Here's how:

<script lang="ts">
import { defineComponent, defineProps, withDefaults } from 'vue';

export default defineComponent({
  setup() {
    const props = withDefaults(defineProps<{ message?: string }>(), {
      message: 'Hello, World!'
    });
    return { props };
  }
});
</script>

This sets a default value for message if it's not provided.

What about type checking for props?

Type checking for props is automatically handled by TypeScript. If you define your props with specific types, TypeScript will enforce those types at compile time. For example, if you define a prop as number, TypeScript will throw an error if you try to pass a string.

Can I use custom validators for props?

Yes, you can use custom validators for props in Vue. You can define a prop with a validator function that checks the value. Here's an example:

<script lang="ts">
import { defineComponent, defineProps } from 'vue';

export default defineComponent({
  setup() {
    const props = defineProps({
      age: {
        type: Number,
        required: true,
        validator: (value: number) => value > 0
      }
    });
    return { props };
  }
});
</script>

This ensures that the age prop is a positive number.