如何基于GridEnrichedColDef联合类型创建带条件属性的简化TS类型？

问题根源 #

你之前用PickUnion生成的类型没有明确区分普通列和操作列的分支规则，导致TypeScript无法正确推断省略type或getActions的普通列类型，从而抛出不匹配错误。

解决方案：明确分支的条件联合类型 #

直接通过条件联合类型拆分普通列和操作列的定义，既保留你需要的SupportedColumnProps，又严格遵循"只有type: 'actions'时允许getActions"的规则：

1. 先定义你需要保留的基础属性

// 替换成你实际需要支持的列属性
type SupportedColumnProps = 'field' | 'headerName' | 'width' | 'align' | 'sortable';

2. 重新定义GridColumn类型

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

type GridColumn =
  // 普通列：支持基础属性，type可选（默认非actions）或明确指定非actions类型
  (Pick<GridColDef, SupportedColumnProps> & { type?: Exclude<GridColDef['type'], 'actions'> })
  // 操作列：必须指定type='actions'，同时允许使用getActions
  | (Pick<GridActionsColDef, SupportedColumnProps | 'getActions'> & { type: 'actions' });

3. 验证用法

// ✅ 合法普通列：仅传field，无type和getActions
const basicCol: GridColumn = { field: 'hello' };

// ✅ 合法普通列：带更多基础属性
const fullBasicCol: GridColumn = {
  field: 'name',
  headerName: '姓名',
  width: 180,
  align: 'center'
};

// ✅ 合法操作列：指定type='actions'并使用getActions
const actionsCol: GridColumn = {
  field: 'actions',
  type: 'actions',
  headerName: '操作',
  getActions: (params) => [
    // 这里放你的操作按钮定义
  ]
};

// ❌ 非法示例：普通列不能用getActions（会触发类型报错）
// const invalidCol: GridColumn = { field: 'test', getActions: () => [] };

// ❌ 非法示例：操作列必须指定type='actions'（会触发类型报错）
// const invalidActionsCol: GridColumn = { field: 'actions', getActions: () => [] };

为什么这个方案有效 #

通过拆分两个明确的分支：

• 普通列分支明确允许省略type，且排除了type: 'actions'的可能，同时不包含getActions属性
• 操作列分支强制要求type: 'actions'，同时额外包含getActions属性

TypeScript可以清晰地推断每个列定义属于哪个分支，不会再出现省略type或getActions时的类型匹配错误。

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