修改MUI DataGrid中GridColDef接口的field键类型

可行方案1：自定义ColDef类型约束field #

如果只是单纯想把field限制为'name'|'id'这类固定值，直接通过类型交叉覆盖原field的类型即可，注意要明确GridColDef的泛型（避免默认泛型带来的冲突）：

import { GridColDef } from '@mui/x-data-grid';

// 定义允许的字段
type AllowedFields = 'name' | 'id';
// 自定义列定义类型：去掉原field，替换为指定的字段类型
type CustomGridColDef = Omit<GridColDef<unknown>, 'field'> & { field: AllowedFields };

// 使用时直接用CustomGridColDef数组
const columns: CustomGridColDef[] = [
  { field: 'name', headerName: '姓名', width: 150 },
  { field: 'id', headerName: 'ID', width: 100 },
  // 这里如果写field: 'age'会直接触发TypeScript报错，符合预期
];

可行方案2：通过Row接口关联约束field #

如果你的表格数据有明确的Row类型，直接给GridColDef传入Row泛型，field会自动约束为Row的键名，更贴合实际业务场景：

import { GridColDef } from '@mui/x-data-grid';

// 定义表格行数据的接口
interface TableRow {
  name: string;
  id: number;
  // 其他字段...
}

// 此时GridColDef<TableRow>的field会自动被约束为'name'|'id'
const columns: GridColDef<TableRow>[] = [
  { field: 'name', headerName: '姓名' },
  { field: 'id', headerName: 'ID' },
];

为什么你之前的方法没生效？ #

• 用Array<GridColDef<{field: 'name' | 'id'}>>是错误的：GridColDef的泛型参数是表格行数据的类型，不是field的类型，你传入的{field: 'name' | 'id'}会被当作Row类型，导致field只能是'field'，完全不符合需求。
• 用Array<Omit<GridColDef, 'field'> & {field: 'name' | 'id'}>没生效，大概率是因为GridColDef默认带了泛型参数（默认是any），导致交叉类型时覆盖不彻底，加上明确的泛型GridColDef<unknown>就能解决。

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