MUI DataGrid使用valueFormatter遇ESLint类型错误求助

• 你使用的GridValueFormatterParams<any>泛型参数为any，TypeScript无法推断params.value的具体类型，@typescript-eslint/no-unsafe-member-access规则会拦截这种在不确定类型值上的属性访问，目的是避免潜在的运行时错误。
• 泛型设为any会关闭TypeScript对params.value的类型检查，ESLint判定这种访问行为不安全，因此抛出警告。

1. 指定明确的泛型类型 #

定义你的行数据类型，给GridValueFormatterParams传入对应字段的类型，让TypeScript能准确推断params.value的类型：

// 假设你的行数据类型是User
interface User {
  id: number;
  username: string;
  joinDate: string;
}

const columns: GridColDef<User>[] = [
  {
    field: 'joinDate',
    headerName: '加入日期',
    valueFormatter: (params: GridValueFormatterParams<User['joinDate']>) => {
      // 此时params.value类型为string，ESLint不会报错
      return new Date(params.value).toLocaleDateString();
    },
  },
];

2. 利用DataGrid的自动类型推导 #

当你给DataGrid的rows属性传入带有明确类型的数组时，columns中的GridColDef会自动继承行数据类型，无需手动指定泛型：

const rows: User[] = [
  { id: 1, username: 'Alice', joinDate: '2023-01-01' },
  { id: 2, username: 'Bob', joinDate: '2023-02-01' },
];

// columns会自动适配User类型，valueFormatter的params类型也会被正确推导
const columns = [
  {
    field: 'joinDate',
    headerName: '加入日期',
    valueFormatter: (params) => {
      return new Date(params.value).toLocaleDateString();
    },
  },
];

<DataGrid rows={rows} columns={columns} />

3. 类型断言（应急方案，不推荐） #

如果暂时无法定义完整的行数据类型，可通过类型断言明确params.value的类型，需自行保证类型匹配：

valueFormatter: (params) => {
  const dateValue = params.value as string;
  return new Date(dateValue).toLocaleDateString();
},

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