使用TypeScript联合类型时自动补全失效，如何解决？

你的问题核心是返回类型为Promise<WeatherData | Error>时，TypeScript无法确定具体类型，因此无法提供自动补全。以下是几种可行的解决方式：

1. 抛出错误而非返回错误（推荐） #

异步函数的常规做法是在失败时抛出错误，而非返回错误对象。这样函数的返回类型会明确为Promise<WeatherData>，自动补全自然生效：

interface WeatherData {
  coord: { lon: number; lat: number };
}

const fetchWeatherData = async (
  location: string
): Promise<WeatherData> => {
  try {
    const res = await axios.get(
      `/weather?q=${location}&APPID=${process.env.API_KEY}`
    );
    return res.data;
  } catch (e) {
    throw new Error("Couldn't fetch weather data");
  }
};

调用时通过try/catch捕获错误即可，此时返回值的类型完全明确，编辑器能正常提供WeatherData的字段补全。

2. 使用类型守卫收窄类型 #

如果必须保留返回联合类型的设计，可以通过类型守卫在调用时明确类型，触发自动补全：

方式一：自定义类型守卫函数 #

// 自定义类型守卫，判断是否为WeatherData
function isWeatherData(data: WeatherData | Error): data is WeatherData {
  return (data as WeatherData).coord !== undefined;
}

// 调用示例
const result = await fetchWeatherData("Beijing");
if (isWeatherData(result)) {
  // 此处TypeScript确定result为WeatherData，自动补全生效
  console.log(result.coord.lon);
} else {
  // 此处为Error类型
  console.log(result.message);
}

方式二：使用内置instanceof守卫 #

const result = await fetchWeatherData("Beijing");
if (!(result instanceof Error)) {
  // 排除Error类型后，TypeScript确定result为WeatherData
  console.log(result.coord.lat);
} else {
  console.log(result.message);
}

3. 使用区分联合类型 #

给两种返回类型添加一个共同的区分字段，让TypeScript能够自动识别类型分支：

interface WeatherData {
  coord: { lon: number; lat: number };
}

interface SuccessResponse {
  type: "success";
  data: WeatherData;
}

interface ErrorResponse {
  type: "error";
  message: string;
}

type WeatherResponse = SuccessResponse | ErrorResponse;

const fetchWeatherData = async (
  location: string
): Promise<WeatherResponse> => {
  try {
    const res = await axios.get(
      `/weather?q=${location}&APPID=${process.env.API_KEY}`
    );
    return { type: "success", data: res.data };
  } catch (e) {
    return { type: "error", message: "Couldn't fetch weather data" };
  }
};

调用时通过区分字段type判断类型，自动补全会正常工作：

const result = await fetchWeatherData("Shanghai");
if (result.type === "success") {
  // 自动补全result.data.coord相关字段
  console.log(result.data.coord.lon);
} else {
  console.log(result.message);
}

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