defineProps<> can't work with Class

[VarroReve]

While I am using defineProps<Class> with a class instead of an interface defineProps<Interface>, I get "type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.";

How can I work with defineProps<Class>?

Error Message:

[plugin:vite:vue] [@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.

C:/Users/admin/code/vue3-webapp/src/components/Products/ProductCard.vue
     |  import {Product} from "@/type/Product";
     |  
     |  let product = defineProps<Product>();
     |                         ^^^^^^^
  Plugin: vite:vue
  File: C:/Users/admin/code/vue3-webapp/src/components/Products/ProductCard.vue
      at error (C:\Users\admin\code\vue3-webapp\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:3589:15)
      at processDefineProps (C:\Users\admin\code\vue3-webapp\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:3631:17)
      at Object.compileScript (C:\Users\admin\code\vue3-webapp\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:4123:43)
      at resolveScript (C:\Users\admin\code\vue3-webapp\node_modules\@vitejs\plugin-vue\dist\index.cjs:277:31)
      at genScriptCode (C:\Users\admin\code\vue3-webapp\node_modules\@vitejs\plugin-vue\dist\index.cjs:2361:18)
      at transformMain (C:\Users\admin\code\vue3-webapp\node_modules\@vitejs\plugin-vue\dist\index.cjs:2178:54)
      at TransformContext.transform (C:\Users\admin\code\vue3-webapp\node_modules\@vitejs\plugin-vue\dist\index.cjs:2657:16)
      at Object.transform (file:///C:/Users/admin/code/vue3-webapp/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:41111:44)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async loadAndTransform (file:///C:/Users/admin/code/vue3-webapp/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:37373:29)

Example Code:

// product.ts
export class Product {
  id: number;
}

// ProductsList.vue
<template>
  <div>
    <ProductCard v-bind="product"></ProductCard>
  </div>
</template>
<script lang="ts" setup>
let product = reactive({id: 1})
</script>

// ProductCard.vue
<script lang="ts" setup>

import {Product} from "@/type/Product";
let product = defineProps<Product>();

</setup>