将 can 绑定到 ability 实例时出现 Typescript 错误答案

【问题标题】：Typescript Error when binding can to ability instance将 can 绑定到 ability 实例时出现 Typescript 错误
【发布时间】：2023-01-04 00:42:32
【问题描述】：

只需粘贴来自 docs 的示例代码

import { createCanBoundTo } from '@casl/react';

import ability from './abilities';

export const Can = createCanBoundTo(ability);

在最后一行给出错误：

导出的变量“Can”具有或正在使用来自的名称“BoundCanClass” 外部模块 “C:/Users/ahmefa04/Documents/SourceCode/temp-cd-next/node_modules/@casl/react/dist/types/factory” 但不能命名.ts(4023)

编辑：我在 factory.d.ts 文件中导出了 BoundCanClass，但是当我尝试在我的应用程序中使用 can 时：
<Can I="view" on="all">
        <Button size="small" onClick={handleUpdateRow}>
          Update a user
        </Button>
</Can>
我收到错误：

没有过载匹配此调用。重载 1 of 2, '(props: BoundCanProps<Ability<AbilityTuple<string, Subject>, { 已发布：布尔值； }>>, context?: any): Can<Ability<AbilityTuple<string, 主题>, { ...; }>, true>', 给出了以下错误。输入'{ children: Element[];我：字符串；上：字符串； }' 不可分配给类型 'IntrinsicAttributes & (IntrinsicClassAttributes<Can<Ability<AbilityTuple<string, Subject>, { 发布：布尔值； }>, true>> & (Readonly<...> & Readonly<...>))'. 类型 '{ children: Element[]; 中缺少属性 'this'；我：字符串；上：字符串； }' 但在类型 'Readonly<{ I: string; 中需要这个：任何记录；领域？：字符串|不明确的; } & BoundCanExtraProps<Ability<AbilityTuple<string, Subject>, { 已发布：布尔值； }>>>'。重载 2 of 2, '(props: BoundCanProps<Ability<AbilityTuple<string, Subject>, { 已发布：布尔值； }>>，上下文？：任何）： Component<BoundCanProps<Ability<AbilityTuple<string, Subject>, { ...; }>>, any, any>', 给出了以下错误。输入'{ children: Element[];我：字符串；上：字符串； }' 不可分配给类型 'IntrinsicAttributes & (IntrinsicClassAttributes<Component<BoundCanProps<Ability<AbilityTuple<string, 主题>，{ 发布：布尔值； }>>, 任何, 任何>> & (只读<...> & 只读<...>))'。类型 '{ children: Element[]; 中缺少属性 'this'；我：字符串；上：字符串； }' 但在类型 'Readonly<{ I: string; 中需要这个：任何记录；领域？：字符串|不明确的; } & BoundCanExtraProps<Ability<AbilityTuple<string, Subject>, { 已发布：布尔值； }>>>'.ts(2769)

【问题讨论】：

标签： typescript casl

【解决方案1】：

出现问题是因为 I 应该与 a、an 或 this 道具一起使用，要使用 on，您应该改用 do：

<Can I="view" a="all">
   <Button size="small" onClick={handleUpdateRow}>
      Update a user
    </Button>
</Can>

要么

<Can do="view" on="all">
   <Button size="small" onClick={handleUpdateRow}>
      Update a user
    </Button>
</Can>

Docs reference

【讨论】：