TypeScript中如何将相关类型按系列分组并绑定关联关系

你要的关联类型绑定效果完全可以实现，只需要调整两处TypeScript语法即可：

1. 访问泛型类型的内部属性类型时，使用索引访问类型语法T['PropertyName']，不要用点语法，点语法是namespace专属用法，普通type/interface不支持。
2. 给Grid组件的泛型加上对应的结构约束，确保传入的类型符合你定义的View结构。

下面是完整可运行的代码示例：
首先是基础的类型定义：

// 示例业务类型，你原有代码中已经存在的定义
type Task = { id: number; title: string; done: boolean };
type TaskFilter = { assigneeId?: number; done?: boolean };
type Project = { id: number; name: string; ownerId: number };
type ProjectFilter = { ownerId?: number; createdAfter?: Date };

然后定义关联类型的绑定结构：

// 定义视图的标准结构，把相关联的类型绑定为一个整体
type View<D = unknown, F = unknown> = {
  Data: D;
  Filter: F;
};

// 为不同业务场景定义绑定后的视图类型
type TasksView = View<Task, TaskFilter>;
type ProjectsView = View<Project, ProjectFilter>;

接下来是通用Grid组件的类型定义：

// Grid组件Props的类型定义，泛型T约束为必须符合View结构
interface GridProps<T extends View> {
  filters: T['Filter'];
}

// 定义泛型Grid组件
function Grid<T extends View>(props: GridProps<T>) {
  const getData = (filters: T['Filter']): T['Data'][] => {
    // 你的数据请求逻辑，返回对应类型的数组
    return [] as T['Data'][];
  };

  const data = getData(props.filters);
  return <table>{/* 表格渲染逻辑 */}</table>;
}

最后生成业务场景专属的Grid组件：

const MyTasksGrid = () => <Grid<TasksView> filters={{ done: false }} />;
const MyProjectsGrid = () => <Grid<ProjectsView> filters={{ ownerId: 123 }} />;

如果后续需要绑定更多关联类型，比如请求参数、响应结构体，直接扩展View的结构即可：

// 扩展后的View结构，可根据需求自由添加关联类型
type View<D = unknown, F = unknown, P = unknown, R = unknown> = {
  Data: D;
  Filter: F;
  RequestParams: P;
  Response: R;
};

使用时同样用索引访问即可取到对应类型，TypeScript会自动约束所有关联类型的匹配关系，传错类型会直接抛出编译错误。

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