I created a new project via npm init vue@latest and know that I can define component props with the new syntax ( taken from the docs ) like so

<script setup lang="ts">
const props = defineProps<{
  foo: MyRequiredType
  bar?: MyOptionalType
}>()
</script>

Now I have to define route props and would like to know if I must use the following syntax or if there is a way to use the syntax from above?

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      component: MyView,
      props: {
        foo: {
          type: Object as PropType<MyRequiredType>,
          required: true
        },
        bar: {
          type: Object as PropType<MyOptionalType>,
          required: false,
          default: undefined,
        },
      },
    },
  ],
});

I tried to use the syntax from above but get the warning

[Vue warn]: defineProps() is a compiler-hint helper that is only usable inside of a single file component. Its arguments should be compiled away and passing it at runtime has no effect.