如何在TypeScript中正确使用判别式联合实现React组件的属性依赖逻辑

阿华AIGC实验室

2026-5-1

实现React组件的属性依赖与判别式联合

要实现你需要的属性关联逻辑，核心是给判别式联合类型一个明确的"区分标志"，让TypeScript能精准识别不同状态下的属性约束。你的现有代码缺少这个关键的判别字段，导致联合类型无法被TypeScript有效区分，我们来一步步重构：

1. 先明确单个表头项的类型

先把表头项的排序状态做清晰区分，让TypeScript能识别哪些项支持排序：

// 基础表头属性（所有表头项都具备）
interface BaseHeaderData {
  text: string;
  key: string;
  columnSpan?: number;
}

// 支持排序的表头项（sortIcon 明确为 true）
interface SortableHeaderData extends BaseHeaderData {
  sortIcon: true;
}

// 不支持排序的表头项（sortIcon 为 false 或省略）
interface NonSortableHeaderData extends BaseHeaderData {
  sortIcon?: false;
}

// 表头项的联合类型（包含两种状态）
type HeaderData = SortableHeaderData | NonSortableHeaderData;

2. 设计组件的判别式联合Props

这里我们添加一个显式的判别字段isSortable，作为TypeScript区分两种组件状态的依据：

// 假设你已定义 SortColumnValue 类型（示例结构）
type SortColumnValue = { key: string; order: 'asc' | 'desc' };

// 不可排序状态：isSortable 为 false，排序相关属性完全禁止传入
interface NonSortableTableProps {
  isSortable?: false;
  headerArray: NonSortableHeaderData[];
  sortState?: never; // 用 never 明确禁止传入该属性
  sortFunction?: never;
}

// 可排序状态：isSortable 为 true，排序相关属性必须传入
interface SortableTableProps {
  isSortable: true;
  headerArray: HeaderData[]; // 允许混合可排序/不可排序的表头项
  sortState: SortColumnValue;
  sortFunction: (key: string) => void;
}

// 组件最终的Props类型（二选一的联合类型）
type TableProps = NonSortableTableProps | SortableTableProps;

3. 验证你的所有调用场景

现在你的几种调用方式都能被TypeScript正确校验：

全可排序表头 + 排序属性

<Component
  isSortable={true}
  headerArray={[{ text: 'Name', key: 'name', sortIcon: true }]}
  sortState={{ key: 'name', order: 'asc' }}
  sortFunction={(key) => console.log('Sorting:', key)}
/>

不可排序表头（无需显式声明isSortable，默认匹配不可排序状态）

<Component
  headerArray={[{ text: 'Name', key: 'name' }, { text: 'Age', key: 'age', sortIcon: false }]}
/>

显式声明不可排序（此时传入sortState/sortFunction会直接触发TypeScript报错）

<Component
  isSortable={false}
  headerArray={[{ text: 'Name', key: 'name' }]}
  // 这里如果传入 sortState 或 sortFunction，TypeScript会立即提示错误
/>

混合表头 + 排序属性

<Component
  isSortable={true}
  headerArray={[
    { text: 'Name', key: 'name', sortIcon: true },
    { text: 'Age', key: 'age' }
  ]}
  sortState={{ key: 'name', order: 'desc' }}
  sortFunction={(key) => console.log('Sorting:', key)}
/>