NDataTable和NPagination组件会对引用了PaginationProps声明的属性报错

[Skall Wu]

描述错误

代码如下

<template>
  <NButton v-bind="buttonProps">button</NButton>
  <NPagination v-bind="pagination" />
  <NDataTable :pagination="pagination" />
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { NButton, NPagination, NDataTable } from "naive-ui";
import type { PaginationProps, ButtonProps } from "naive-ui";

const buttonProps = reactive<ButtonProps>({});
const pagination = reactive<PaginationProps>({});
</script>

运行tsc检查后报错如下

src/test.vue:3:4 - error TS2345: Argument of type '{ themeOverrides?: { buttonColor?: string | undefined; buttonColorHover?: string | undefined; buttonColorPressed?: string | undefined; buttonBorder?: string | undefined; buttonBorderHover?: string | undefined; ... 66 more ...; common?: { ...; } | undefined; } | undefined; ... 29 more ...; onChange?: MaybeArray<...> ...' is not assignable to parameter of type 'Partial<{ readonly size: Size; readonly disabled: boolean; readonly to: string | boolean | HTMLElement; readonly simple: boolean; readonly defaultPage: number; readonly defaultPageCount: number; ... 5 more ...; readonly showQuickJumpDropdown: boolean; }> & Omit<...> & Record<...>'.
  Type '{ themeOverrides?: { buttonColor?: string | undefined; buttonColorHover?: string | undefined; buttonColorPressed?: string | undefined; buttonBorder?: string | undefined; buttonBorderHover?: string | undefined; ... 66 more ...; common?: { ...; } | undefined; } | undefined; ... 29 more ...; onChange?: MaybeArray<...> ...' is not assignable to type 'Omit<{ readonly disabled: boolean; readonly size: Size; readonly simple: boolean; readonly defaultPage: number; readonly defaultPageCount: number; readonly showSizePicker: boolean; ... 26 more ...; readonly onChange?: MaybeArray<...> | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readon...'.
    Types of property 'selectProps' are incompatible.
      Type '{ themeOverrides?: { menuBoxShadow?: string | undefined; peers?: { InternalSelection?: { fontSizeTiny?: string | undefined; fontSizeSmall?: string | undefined; fontSizeMedium?: string | undefined; ... 50 more ...; common?: { ...; } | undefined; } | undefined; InternalSelectMenu?: { ...; } | undefined; } | undefined;...' is not assignable to type 'SelectProps | undefined'.

3   <NPagination v-bind="pagination" />
     ~~~~~~~~~~~

src/test.vue:4:15 - error TS2322: Type '{ themeOverrides?: { buttonColor?: string | undefined; buttonColorHover?: string | undefined; buttonColorPressed?: string | undefined; buttonBorder?: string | undefined; buttonBorderHover?: string | undefined; ... 66 more ...; common?: { ...; } | undefined; } | undefined; ... 29 more ...; onChange?: MaybeArray<...> ...' is not assignable to type 'false | PaginationProps | undefined'.

4   <NDataTable :pagination="pagination" />
                ~~~~~~~~~~~

  node_modules/naive-ui/es/data-table/src/DataTable.d.ts:6209:14
    6209     readonly pagination: false | import("../../pagination").PaginationProps;
                      ~~~~~~~~~~
    The expected type comes from property 'pagination' which is declared here on type 'Partial<{ readonly data: RowData[]; readonly size: "small" | "medium" | "large"; readonly tableLayout: "auto" | "fixed"; readonly columns: TableColumns<any>; ... 21 more ...; readonly spinProps: BaseLoadingExposedProps; }> & Omit<...> & Record<...>'

复现步骤

vscode的ts检查会报错或者npm run tsc

也有沙盒的链接，只是我不知道如何让别人也能用命令行

https://codesandbox.io/p/devbox/naive-ui-paginationprops-wt75xq

最小复现链接

https://github.com/ZHowee/naive-ui-PaginationProps

系统信息

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz
    Memory: 16.20 GB / 31.75 GB
  Binaries:
    Node: 18.19.1 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - D:\Program Files\nodejs\yarn.CMD
    npm: 10.2.4 - D:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.1 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    naive-ui: ^2.38.1 => 2.38.1 
    vue: ^3.4.21 => 3.4.21

使用的包管理器

yarn

验证

• 阅读 贡献指南。
• 阅读 文档。
• 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• 提供的复现是最小可复现的示例。

[jahnli]

检查类型定义，pagination 接收的是 false | object