how to use props to define ts class type

[52javascript]

Vue version

2.7 3.2

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-zjhkvo?file=src%2FApp.vue

Steps to reproduce

1. useListCrud.ts

import { BaseListCrud } from '../../'

export const useListCrud = (cfg: any) => {
  const crud = reactive<BaseListCrud>(new BaseListCrud(cfg))

  if (crud.auto) {
    crud.reqDataList()
  }

  return {
    crud
  }
}

2. BaseListCrud.ts

export class BaseListCrud  {
  public formData: any = {}
}

3. user-list.vue

<script setup lang="ts">
import { ListCrud, useListCrud } from '@wangtiansoft/wt-crud'

const { crud } = useListCrud({
  search: {
    url: '/auth/userList'
  },
  delete: {
    url: '/auth/userDelete'
  },
  formData: {
    rich: ''
  }
})
</script>
<template>
  <div class="user-list wt-list-container">
    <list-crud :crud="crud">
      <template #search>
        <crud-form-item v-model="crud.formData.title" label="用户名" />
        <crud-form-item v-model="crud.formData.rich" label="真实姓名" />
        <crud-form-item :span="8" v-model="crud.formData.title" label="手机号码" />
        <crud-form-item :span="8" v-model="crud.formData.title" label="手机号码" />
      </template>
      <template #toolbar-left>
        <crud-button action="add" @click="crud.onClickAddByRouter('USER-ADD')">新增</crud-button>
        <crud-button type="danger" action="delete" @click="crud.onClickMultipleDelete()">批量删除</crud-button>
      </template>
      <template #toolbar-right>
        <crud-button type="primary">导出</crud-button>
      </template>
      <template #main>
        <!-- <crud-tinymce action="edit" v-model="crud.formData.rich" /> -->
      </template>
      <template #column>
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="realname" label="真实姓名" sortable></el-table-column>
        <el-table-column prop="mobile" label="手机号码"></el-table-column>
        <el-table-column prop="roleNameList" label="所属角色">
          <template v-slot="scope">
            <span>{{ scope.row.roleNameList && scope.row.roleNameList.length > 0 ? scope.row.roleNameList.join(',') : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isPublish" label="状态">
          <template v-slot="scope">
            <crud-status dict-key="IS_PUBLISH" :value="scope.row.isPublish"></crud-status>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" width="160" fixed="right">
          <template v-slot="{ row }">
            <crud-text-button>查看</crud-text-button>
            <crud-text-button @click="crud.onClickEditByRouter('USER-EDIT', { id: row.id })">编辑</crud-text-button>
            <crud-text-button type="danger" @click="crud.onClickDelete(row.id)">删除</crud-text-button>
          </template>
        </el-table-column>
      </template>
    </list-crud>
  </div>
</template>

4. list-crud.vue

const props = withDefaults(
defineProps<{
crud: BaseListCrud
layout?: string
pageSizes?: number[]
tableAttrs?: {
[key: string]: any
}
tableTitle?: string
}>(),
{
pageSizes: () => [10, 20, 30, 40, 50],
// tableAttrs: () => {},
layout: 'total, sizes, prev, pager, next, jumper',
tableTitle: '数据列表'
}
)

What is expected?

Vue: Type
{ search: { url: string; method: string; pageData: { currentPage: number; pageSize: number; sortName?: string | undefined; sortOrder?: '' | 'desc' | 'asc' | undefined; } | null; callback?: ((result: ListResult) => ListResult) | undefined; }; ... 35 more ...; getRouterParams: () => Promise<...>; }
is not assignable to type BaseListCrud

What is actually happening?

crud is a ts class instance, but when it used by use Function, father component can not assign type

i try crud: BaseListCrud or crud; PropType it is not correctly

System Info

No response

Any additional comments?

No response

[Shyam-Chen]

https://vuejs.org/guide/typescript/composition-api#typing-component-props

[52javascript]

https://vuejs.org/guide/typescript/composition-api#typing-component-props

并没用，示例里是个interface, 而我这里是个class, 就是识别不出来

[ChuTingzj]

https://vuejs.org/guide/typescript/composition-api#typing-component-props

并没用，示例里是个interface, 而我这里是个class, 就是识别不出来

我好像没复现3.2、3.4都试过了，也有可能是IDE的问题

[ChuTingzj]

https://vuejs.org/guide/typescript/composition-api#typing-component-props

并没用，示例里是个interface, 而我这里是个class, 就是识别不出来

官方是这么说的

语法限制​
在 3.2 及以下版本中，defineProps() 的泛型类型参数仅限于类型文字或对本地接口的引用。
这个限制在 3.3 中得到了解决。最新版本的 Vue 支持在类型参数位置引用导入和有限的复杂类型。但是，由于类型到运行时转换仍然基于 AST，一些需要实际类型分析的复杂类型，例如条件类型，还未支持。您可以使用条件类型来指定单个 prop 的类型，但不能用于整个 props 对象的类型。

[52javascript]

https://vuejs.org/guide/typescript/composition-api#typing-component-props

并没用，示例里是个interface, 而我这里是个class, 就是识别不出来

官方是这么说的

语法限制​ 在 3.2 及以下版本中，defineProps() 的泛型类型参数仅限于类型文字或对本地接口的引用。 这个限制在 3.3 中得到了解决。最新版本的 Vue 支持在类型参数位置引用导入和有限的复杂类型。但是，由于类型到运行时转换仍然基于 AST，一些需要实际类型分析的复杂类型，例如条件类型，还未支持。您可以使用条件类型来指定单个 prop 的类型，但不能用于整个 props 对象的类型。

你是通过use函数导出的class对象吗

[ChuTingzj]

https://vuejs.org/guide/typescript/composition-api#typing-component-props

并没用，示例里是个interface, 而我这里是个class, 就是识别不出来

官方是这么说的
语法限制​ 在 3.2 及以下版本中，defineProps() 的泛型类型参数仅限于类型文字或对本地接口的引用。 这个限制在 3.3 中得到了解决。最新版本的 Vue 支持在类型参数位置引用导入和有限的复杂类型。但是，由于类型到运行时转换仍然基于 AST，一些需要实际类型分析的复杂类型，例如条件类型，还未支持。您可以使用条件类型来指定单个 prop 的类型，但不能用于整个 props 对象的类型。

你是通过use函数导出的class对象吗

啥意思