IntelliJ中react-bootstrap-table-next的validator字段报Typescript错误如何解决

问题原因 #

• 你用到的ColumnDescription是react-bootstrap-table-next的基础列定义类型，仅包含核心列属性，validator属于单元格编辑功能的专属扩展属性，没有被纳入基础类型的声明中，因此TypeScript会报该字段不存在的错误。
• 你当前写的validator函数只在输入值不合法时返回了结果，输入值为合法数字的分支没有任何返回，不符合函数返回类型要求，也会触发TS报错。
• //@ts-ignore未生效大多是因为IntelliJ的TypeScript语言服务存在缓存，或是注释放置的位置不对。

解决方法 #

1. 补全validator函数返回逻辑 #

首先要补齐合法场景的返回值，避免出现分支无返回的问题：

validator: (newValue, row, column) => {
    if (isNaN(newValue)) {
        return {
            valid: false,
            message: 'This field needs to be a number'
        };
    }
    // 新增校验通过时的返回
    return { valid: true };
}

2. 修复类型不匹配问题 #

二选一即可：

• 方案一：扩展ColumnDescription类型，新增validator属性声明
  在当前代码文件的顶部添加以下类型扩展代码：

declare module 'react-bootstrap-table-next' {
    interface ColumnDescription {
        validator?: (newValue: any, row: any, column: ColumnDescription) => { valid: boolean; message?: string }
    }
}

• 方案二：移除columns变量的显式类型标注ColumnDescription[]，让TypeScript自动推导变量类型，不会触发额外的字段存在性校验。

3. 忽略报错的处理方案 #

如果确定要使用//@ts-ignore跳过校验，将注释直接放在validator字段的上一行，随后在IntelliJ中按快捷键Ctrl+Shift+A（Mac系统为Cmd+Shift+A），搜索「Restart TypeScript Service」执行重启，即可让忽略注释生效。

内容的提问来源于stack exchange，提问作者Peter Kronenberg