columnDefs回调函数及valueGetter参数的TypeScript类型咨询

嘿，这个问题我太熟了！咱们直接说干货：

首先得明确：你用到的 columnDefs 是 AG Grid 里的核心配置项对吧？对应的 TypeScript 类型都是官方封装好的，不用自己瞎写～

1. ColumnDefs 的整体类型 #

columnDefs 的类型是 ColDef<TData> 数组，其中 <TData> 是你的行数据类型。把行数据类型传进去后，整个列配置都会获得精准的类型提示。

比如你的行数据是这样的：

// 定义行数据的接口
interface UserRow {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
}

那 columnDefs 就可以这么声明：

import { ColDef } from '@ag-grid-community/core';

const columnDefs: ColDef<UserRow>[] = [
  // 这里写你的列配置
];

2. ValueGetter 的参数类型 #

你写的 myValueGetter 函数，它的参数 params 对应的类型是 ValueGetterParams<TData, TValue>：

• <TData>：还是你的行数据类型（和上面的 ColDef 保持一致）
• <TValue>：可选参数，用来指定这个 valueGetter 返回值的类型，如果不填，TypeScript 会自动推断。

还是用上面的 UserRow 举例子，写一个拼接全名的 valueGetter：

import { ValueGetterParams } from '@ag-grid-community/core';

const columnDefs: ColDef<UserRow>[] = [
  {
    headerName: '全名',
    valueGetter: (params: ValueGetterParams<UserRow, string>) => {
      // 这里 params 会有完整的类型提示：比如 params.data.firstName 会被识别为 string 类型
      return `${params.data.firstName} ${params.data.lastName}`;
    }
  },
  {
    headerName: '邮箱',
    field: 'email'
  }
];

额外提示 #

• 确保你已经安装了 AG Grid 的核心包（比如 @ag-grid-community/core），这些类型都是包自带的，不用额外安装类型库。
• 用具体类型代替 any 后，编辑器会给你自动补全 params 里的所有属性（比如 params.node、params.colDef 等），还能提前发现拼写错误或者类型不匹配的问题，开发体验会好很多！

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