TypeScript中如何实现动作类型与数据类型的关联约束？

你需要用联合类型实现动作与数据类型的绑定，而非依赖基接口继承。之前的写法无效是因为基接口IAction的data为any类型，TypeScript无法通过action的值自动收窄data的类型。以下是具体实现方案：

基础实现方案 #

1. 定义动作类型与对应数据结构 #

先明确动作的可选值和每个动作对应的数据结构：

// 动作类型枚举（也可直接用字符串字面量 "one" | "two" | "three"）
export enum ActionTypes {
  One = "one",
  Two = "two",
  Three = "three"
}

// 各动作对应的数据结构
export interface IActionOneData {
  x: number;
}

export interface IActionTwoData {
  y: number;
  z: string;
}

export interface IActionThreeData {
  someList: string[];
}

2. 定义动作的联合类型 #

为每个动作定义独立接口，再组合成联合类型——这是实现类型关联的核心：

// 单个动作的完整类型
interface IActionOne {
  action: ActionTypes.One;
  data: IActionOneData;
  otherParam1: number;
  otherParam2: number;
}

interface IActionTwo {
  action: ActionTypes.Two;
  data: IActionTwoData;
  otherParam1: number;
  otherParam2: number;
}

interface IActionThree {
  action: ActionTypes.Three;
  data: IActionThreeData;
  otherParam1: number;
  otherParam2: number;
}

// 联合类型，TypeScript会通过action值自动识别对应的数据类型
export type Action = IActionOne | IActionTwo | IActionThree;

3. 使用联合类型实现类型安全的函数 #

函数参数使用上述联合类型后，TypeScript会在判断action值时自动收窄data的类型：

function doAction(action: Action): void {
  if (action.action === ActionTypes.One) {
    // 此处data自动推断为IActionOneData，可安全访问x
    console.log("x = " + action.data.x);
    // console.log(action.data.undef); // 尝试访问不存在的属性会触发TypeScript错误，符合预期
  } else if (action.action === ActionTypes.Two) {
    console.log("y = " + action.data.y + ", z = " + action.data.z);
  } else if (action.action === ActionTypes.Three) {
    console.log("list length = " + action.data.someList.length);
  }
}

优化实现（减少重复代码） #

如果动作较多，可用映射类型和交叉类型抽离公共参数，避免重复定义：

// 公共参数抽离
interface IActionCommon {
  otherParam1: number;
  otherParam2: number;
}

// 动作类型与数据结构的映射表
type ActionDataMap = {
  [ActionTypes.One]: IActionOneData;
  [ActionTypes.Two]: IActionTwoData;
  [ActionTypes.Three]: IActionThreeData;
};

// 自动生成联合类型，新增动作只需修改ActionDataMap
export type Action = {
  [K in keyof ActionDataMap]: {
    action: K;
    data: ActionDataMap[K];
  }
}[keyof ActionDataMap] & IActionCommon;

为什么之前的写法无效？ #

你之前用基接口IAction作为函数参数，它的data是any类型。即使定义了继承自IAction的IActionOne，TypeScript无法确定传入的IAction具体是哪个子类型，因此不会自动收窄data的类型。而联合类型中每个成员的action是唯一的字面量值，TypeScript可以通过这个值精准判断当前类型，从而实现data的类型自动推断。

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