如何使用TypeScript强制约束Redux状态的引用关系并拆分状态类型

嘿，我来帮你搞定这个TypeScript类型约束的问题！你现在是想把Redux的状态拆分成两种互斥的类型——空状态和有选中文档的填充状态，还得确保填充状态里的currentId和documents的键严格绑定，不能出现currentId存在但documents里找不到对应键的情况，对吧？

先还原一下你给出的初始状态类型：

type DocumentId = string;

type State = {
  currentId?: DocumentId;
  documents: Record<DocumentId, string>
}

你想要拆成类似这样的结构，但不确定PopulatedState里的X该怎么定义，才能让currentId和documents的键强绑定：

type DocumentId = string;

type EmptyState = {
  currentId: undefined;
  documents: {}
}

type PopulatedState = {
  currentId: X;
  documents: Record<X, string>;
}

type State = EmptyState | PopulatedState;

接下来给你两种靠谱的实现方案，都能完美满足需求：

方法一：泛型绑定（最直观好理解） #

用泛型参数把currentId和documents的键直接绑定在一起，TypeScript就能严格检查两者的对应关系了：

type DocumentId = string;

// 空状态：明确currentId是undefined，documents用Record<never, string>比{}更严谨，
// 因为{}在TS里其实允许任意键，而Record<never>表示完全没有合法键
type EmptyState = {
  currentId: undefined;
  documents: Record<never, string>;
}

// 用泛型T绑定currentId和documents的键，T必须是DocumentId类型
type PopulatedState<T extends DocumentId> = {
  currentId: T;
  documents: Record<T, string>;
}

// 如果你的场景是documents可以有多个文档，但currentId必须是其中已存在的一个，
// 可以调整成下面这种写法，确保currentId是documents的有效键：
type PopulatedStateWithMultipleDocs<T extends DocumentId> = {
  currentId: T;
  documents: Record<DocumentId, string>;
}

// 最终的State类型：要么是空状态，要么是任意合法的填充状态
type State = EmptyState | PopulatedState<DocumentId>;

方法二：索引类型强约束（无需泛型） #

如果你不想用泛型，也可以用TypeScript的索引类型特性，直接让currentId必须是自身documents的键：

type DocumentId = string;

type EmptyState = {
  currentId: undefined;
  documents: {};
}

// 这里用keyof约束currentId必须是documents的键，确保两者强绑定
type PopulatedState = {
  documents: Record<DocumentId, string>;
  currentId: keyof this["documents"];
}

// 最终的联合状态类型
type State = EmptyState | PopulatedState;

这样做的好处 #

• 类型收窄超省心：当你在代码里判断state.currentId !== undefined时，TypeScript会自动把状态类型收窄为PopulatedState，这时候你直接用state.documents[state.currentId]完全不会有类型报错，TS会明确知道这个键一定存在。
• 从根源避免bug：再也不会出现currentId有值，但documents里找不到对应文档的情况，TypeScript在编译阶段就会帮你拦住这种错误。

给你举个实际使用的小例子，感受一下类型收窄的爽感：

function handleState(state: State) {
  if (state.currentId === undefined) {
    // 这里TS自动推断是EmptyState，documents是空的
    console.log("还没有选中任何文档哦");
  } else {
    // 这里TS自动推断是PopulatedState，state.documents[state.currentId]一定存在
    const selectedDoc = state.documents[state.currentId];
    console.log("选中的文档内容：", selectedDoc);
  }
}

备注：内容来源于stack exchange，提问作者mzedeler