如何获取TypeScript标记联合类型的非公共属性类型？

我明白你在处理TypeScript标记联合类型Action时遇到的困扰——想要遍历并修改不同类型分支里的字符串属性（把http替换成https），但类型系统一直给你报错。先回顾下你的场景定义：

type Action = 
  | { type: 'OPEN'; url: string; incognito: boolean; } 
  | { type: 'CLICK'; count: number; } 
  | { type: 'SAVE'; link: string; };

你的三次尝试与问题分析 #

尝试1：直接遍历Object.keys #

你最初尝试直接用Object.keys遍历属性，但因为field被推断为string，TypeScript不允许用任意字符串索引Action类型：

function run(action: Action) {
  Object.keys(action).forEach(field => {
    if (field === 'type' || typeof action[field] !== 'string') {
      return;
    }
    const value = action[field]; // <-- 错误：field是string，无法索引Action
    action[field] = value.replace('http://', 'https://'); // <-- 同样错误
  });
}

尝试2：强制转换Object.keys为keyof Action #

你试图把Object.keys的结果转成keyof Action，但keyof Action只能拿到公共属性type，过滤掉type后field的类型变成了never，自然无法继续操作：

function run2(action: Action) {
  (Object.keys(action) as Array<keyof Action>).forEach(field => {
    if (field === 'type' || typeof action[field] !== 'string') {
      return;
    }
    const value = action[field];
    action[field] = value.replace('http://', 'https://'); // <-- 错误：field类型为never
  });
}

尝试3：用泛型绑定具体Action分支 #

你想到用泛型提取对应type的Action分支，但TypeScript还是无法识别action[field]是字符串类型，问题出在这里：
当T是泛型时，TypeScript无法在forEach回调里细化field的类型。比如当T是'OPEN'时，keyof ActionWithType<T>是'type' | 'url' | 'incognito'，但回调里的类型检查typeof action[field] !== 'string'没办法让TypeScript推断出field此时只能是'url'（即字符串类型的键）——泛型的存在让TypeScript无法做更精确的类型窄化。

type ActionType = Action['type'];
type ActionWithType<T> = Extract<Action, { type: T }>;
function run3<T extends ActionType>(action: ActionWithType<T>) {
  (Object.keys(action) as Array<keyof ActionWithType<T>>).forEach(field => {
    if (field === 'type' || typeof action[field] !== 'string') {
      return;
    }
    action[field] = action[field].replace('http://', 'https://'); // <-- 错误：无法确定action[field]是string
  });
}

正确的解决思路 #

标记联合类型的核心优势就是可以通过type属性做精确的类型窄化，与其遍历所有属性，不如针对每个Action分支单独处理，这样TypeScript能完美识别每个分支的属性类型。

方案1：分支判断+类型守卫（最直接） #

function runCorrect(action: Action) {
  switch(action.type) {
    case 'OPEN':
      action.url = action.url.replace('http://', 'https://');
      break;
    case 'SAVE':
      action.link = action.link.replace('http://', 'https://');
      break;
    case 'CLICK':
      // CLICK分支没有字符串属性，无需处理
      break;
  }
}

这种方式类型安全，完全符合TypeScript对标记联合类型的设计意图，代码可读性也很高。

方案2：通用工具函数（适合多分支场景） #

如果你的Action分支很多，不想写重复的switch代码，可以定义一个工具函数结合类型守卫处理：

// 提取Action中带有字符串属性的分支
type ActionWithStringProps = Exclude<Action, { type: 'CLICK' }>;

// 工具函数：处理单个字符串属性的http替换
function fixHttpUrl<T extends object, K extends keyof T>(obj: T, key: K): void {
  if (typeof obj[key] === 'string') {
    obj[key] = obj[key].replace('http://', 'https://') as T[K];
  }
}

function runGeneric(action: Action) {
  if (action.type === 'OPEN') {
    fixHttpUrl(action, 'url');
  } else if (action.type === 'SAVE') {
    fixHttpUrl(action, 'link');
  }
}

方案3：类型映射提取属性（进阶玩法） #

如果你想更自动化地提取所有需要替换的属性，可以用类型映射找出所有字符串类型的非公共属性：

// 提取某个Action分支中除了type之外的字符串属性键
type StringNonTypeKeys<T extends Action> = Exclude<{
  [K in keyof T]: T[K] extends string ? K : never;
}[keyof T], 'type'>;

// 针对单个分支的通用处理函数
function processActionBranch<T extends Action>(action: T, keys: StringNonTypeKeys<T>[]) {
  keys.forEach(key => {
    action[key] = action[key].replace('http://', 'https://') as T[typeof key];
  });
}

function runAdvanced(action: Action) {
  switch(action.type) {
    case 'OPEN':
      processActionBranch(action, ['url']);
      break;
    case 'SAVE':
      processActionBranch(action, ['link']);
      break;
  }
}

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