如何在TypeScript中避免类型转换？能否用类型守卫判断函数返回类型？

没问题！完全可以借助TypeScript的类型守卫和自动类型缩小特性，完美解决你不想手动做类型转换的需求。咱们先把你的类型定义补全（方便演示），再一步步看实现方案：

1. 先明确完整的类型定义 #

首先要确保每个子类型的type属性是明确的字符串字面量，而不是宽泛的联合类型，这是TypeScript能自动区分类型的关键：

type ControlPageType = "TypeA" | "TypeB";

interface ControlPageDto {
  type: ControlPageType;
}

interface TypeAData extends ControlPageDto {
  type: "TypeA"; // 明确标记为TypeA的字面量
  foo: string;
}

interface TypeBData extends ControlPageDto {
  type: "TypeB"; // 明确标记为TypeB的字面量
  bar: number;
}

// 模拟你的返回联合类型的函数
function getControlPage(): TypeAData | TypeBData {
  return Math.random() > 0.5 
    ? { type: "TypeA", foo: "示例文本" } 
    : { type: "TypeB", bar: 456 };
}

2. 最简单的方案：直接判断字面量类型 #

因为每个子类型都有唯一的type字面标识，直接用===判断就能让TypeScript自动缩小类型范围，完全不需要手动转换：

const page = getControlPage();

if (page.type === "TypeA") {
  // 这里TypeScript自动推断page是TypeAData，直接用foo属性
  console.log("TypeA的foo值:", page.foo);
} else {
  // 剩下的必然是TypeBData，直接用bar属性
  console.log("TypeB的bar值:", page.bar);
}

3. 复杂场景：自定义类型守卫函数 #

如果你的类型判断逻辑更复杂（比如除了type还要校验其他属性是否存在），可以写一个自定义类型守卫函数，让类型判断更灵活：

// 自定义类型守卫：返回true时，TypeScript就知道参数是TypeAData
function isTypeAData(page: ControlPageDto): page is TypeAData {
  return page.type === "TypeA" && typeof (page as TypeAData).foo === "string";
}

const page = getControlPage();

if (isTypeAData(page)) {
  console.log("TypeA的foo值:", page.foo);
} else {
  console.log("TypeB的bar值:", page.bar);
}

核心原理 #

这里的关键是类型缩小：TypeScript会根据你写的条件语句，自动把联合类型的范围缩小到符合条件的子类型。只要你的子类型有唯一的标识（比如这里的type字面量），TypeScript就能精准识别，根本不需要手动写as TypeAData这种类型转换。

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