AG Grid v30.x中cellStyle类型不兼容问题咨询

问题场景 #

• 使用 ag-grid-enterprise@25.3.0 时，以下代码可正常编译：

columnDefs: ColDef[] = [
  { 
    field: 'select',
    maxWidth: 40,
    pinned: 'left', 
    lockPinned: true, 
    headerCheckboxSelection: params => {return this.isProdUser ? false : true},
    checkboxSelection: true, 
    cellStyle: params => {return this.isProdUser ? {'pointer-events': 'none', opacity: '0.4' } : '';}
  },
  { 
    headerName: 'Actions', 
    field: 'id', 
    suppressMenu: true,
    pinned: 'left',
    lockPinned: true, 
    cellRendererFramework: ImgDeleterenderer, 
    cellRendererParams: { context: this },
    width: 66 
  },
  { 
    headerName: 'Report Title', 
    field: 'title', 
    tooltipField: 'title',
    tooltipComponentFramework: ObjectiveTooltipComponent,
    sortable: true, 
    width: 125,
    filter: true 
  },
];

• 升级至 ag-grid-enterprise@30.1.0 后，触发如下 TypeScript 错误：

[{ 
  "resource": "setup-report.component.ts", 
  "owner": "typescript", 
  "code": "2322", 
  "severity": 8, 
  "message": "Type '(params: CellClassParams<any, any>) => "" | { 'pointer-events': string; opacity: string; }' is not assignable to type 'CellStyle | CellStyleFunc<any, any>'.\n  Type '(params: CellClassParams<any, any>) => "" | { 'pointer-events': string; opacity: string; }' is not assignable to type 'CellStyleFunc<any, any>'.\n    Type '"" | { 'pointer-events': string; opacity: string; }' is not assignable to type 'CellStyle'.\n      Type 'string' is not assignable to type 'CellStyle'.", 
  "source": "ts", 
  "startLineNumber": 48, 
  "startColumn": 176, 
  "endLineNumber": 48, 
  "endColumn": 185, 
  "relatedInformation": [ 
    { 
      "startLineNumber": 315, 
      "startColumn": 5, 
      "endLineNumber": 315, 
      "endColumn": 14, 
      "message": "The expected type comes from property 'cellStyle' which is declared here on type 'ColDef<any, any>'", 
      "resource": "/node_modules/ag-grid-community/dist/lib/entities/colDef.d.ts" 
    } 
  ] 
}]

错误原因 #

AG Grid 30.x 版本收紧了 cellStyle 的类型校验：旧版本允许 CellStyleFunc 返回空字符串，新版本要求该函数必须返回 CellStyle 类型（即样式对象），空字符串不属于合法的 CellStyle 类型，因此触发类型不匹配错误。

解决方法 #

将 cellStyle 函数中返回的空字符串 '' 替换为空对象 {}（或 undefined，AG Grid 会忽略未定义的样式）。修改后的代码如下：

columnDefs: ColDef[] = [
  { 
    field: 'select',
    maxWidth: 40,
    pinned: 'left', 
    lockPinned: true, 
    // 可简化写法：直接返回 !this.isProdUser
    headerCheckboxSelection: params => !this.isProdUser,
    checkboxSelection: true, 
    // 核心修改：把返回''改为返回{}
    cellStyle: params => this.isProdUser ? {'pointer-events': 'none', opacity: '0.4' } : {}
  },
  { 
    headerName: 'Actions', 
    field: 'id', 
    suppressMenu: true,
    pinned: 'left',
    lockPinned: true, 
    cellRendererFramework: ImgDeleterenderer, 
    cellRendererParams: { context: this },
    width: 66 
  },
  { 
    headerName: 'Report Title', 
    field: 'title', 
    tooltipField: 'title',
    tooltipComponentFramework: ObjectiveTooltipComponent,
    sortable: true, 
    width: 125,
    filter: true 
  },
];

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