TypeScript能否基于两个属性实现判别式联合类型？

结论 #

可以实现。通过为联合类型的每个成员显式声明remote/client的存在状态（存在时设为true，不存在时隐式排除该属性），结合TypeScript的类型窄化特性，就能构建符合需求的判别式联合类型，调用时无需传入client: undefined或remote: undefined。

实现方案 #

1. 定义Node.js场景类型 #

根据需求的三种场景（远程请求、客户端本地请求、非客户端本地请求），明确各类型的属性边界：

// Node.js 远程请求：仅包含 remote: true 及专属属性
type NodeRemote = {
  remote: true;
  baz: string;
};

// Node.js 客户端本地请求：仅包含 client: true 及专属属性
type NodeClientLocal = {
  client: true;
  file: ArrayBuffer;
};

// Node.js 非客户端本地请求：不含 remote 和 client，仅含本地专属属性
type NodeLocal = {
  file: string;
};

// Node.js 输入联合类型：三种场景的组合
type NodeType = NodeRemote | NodeClientLocal | NodeLocal;

2. 定义浏览器端类型 #

// 浏览器远程请求：仅包含 remote: true 及专属属性
type BrowserRemote = {
  remote: true;
  foo: string;
};

// 浏览器本地请求：不含 remote，仅含本地专属属性
type BrowserLocal = {
  bar: string;
};

type BrowserType = BrowserRemote | BrowserLocal;

3. 实现带类型窄化的处理函数 #

通过属性存在性检查，TypeScript会自动窄化类型，识别对应场景的专属属性：

function convertNode(input: NodeType) {
  if ('remote' in input) {
    // 类型自动窄化为 NodeRemote
    console.log('远程请求:', input.baz);
  } else if ('client' in input) {
    // 类型自动窄化为 NodeClientLocal
    console.log('客户端本地请求:', input.file); // file 类型为 ArrayBuffer
  } else {
    // 类型自动窄化为 NodeLocal
    console.log('非客户端本地请求:', input.file); // file 类型为 string
  }
}

function convertBrowser(input: BrowserType) {
  if ('remote' in input) {
    console.log('浏览器远程请求:', input.foo);
  } else {
    console.log('浏览器本地请求:', input.bar);
  }
}

4. 正确调用示例 #

无需传入undefined，直接按场景传参：

// Node.js 远程请求
convertNode({ remote: true, baz: '远程数据' });

// Node.js 客户端本地请求
convertNode({ client: true, file: new ArrayBuffer(8) });

// Node.js 非客户端本地请求
convertNode({ file: '/本地文件路径' });

// 浏览器远程请求
convertBrowser({ remote: true, foo: '浏览器远程数据' });

// 浏览器本地请求
convertBrowser({ bar: '浏览器本地数据' });

原理说明 #

TypeScript的判别式联合类型核心是通过属性存在性或固定值来区分联合成员：

• 当联合类型成员中，部分包含remote: true，部分包含client: true，其余成员不包含这两个属性时，TypeScript可通过'remote' in input这类检查精准窄化类型。
• 对于同名但不同类型的属性（如NodeClientLocal和NodeLocal中的file），类型窄化后TypeScript会自动识别对应场景的属性类型，避免类型错误。

注意事项 #

• 避免联合类型成员出现歧义：不要同时包含remote: true和client: true的类型（除非需求明确需要该场景），否则会干扰类型窄化逻辑。
• 若需支持remote: false或client: false的场景，需显式声明属性值，但根据当前需求，隐式排除属性即可满足要求。

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