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

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

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

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

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

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

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

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

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

官方是这么说的

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

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

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

官方是这么说的

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

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

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

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

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

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

啥意思