TypeScript变量经强类型操作后类型未更新的问题

问题原因 #

你遇到的问题核心在于：payload变量的类型在首次声明时被推断为Base，后续调用addA和addB并赋值回payload时，TypeScript只会校验返回值是否兼容原变量类型，不会自动将payload的类型更新为Base & ExtA & ExtB。这是因为let变量的类型默认是首次推断后的拓宽类型，后续赋值仅做兼容性检查，不会动态变更类型。

解决方案 #

方案1：使用独立变量链式构建（推荐） #

通过创建新变量保存每一步的结果，让TypeScript自动推导每一步的类型，完全符合类型安全要求：

type Base = {
  name: string;
};

type ExtA = {
  type: "a";
  address: string;
};

type ExtB = {
  type: "b";
  streetName: string;
};

function handler<T extends Base>(input: T): T {
  return input;
}

const addA = <T extends Base>(payload: T): T & ExtA => {
  return {
    ...payload,
    type: "a",
    address: "123 Fake St",
  };
};

const addB = <T extends Base>(payload: T): T & ExtB => {
  return {
    ...payload,
    type: "b",
    streetName: "Main",
  };
};

// 分步创建变量，自动推导每一步的类型
const payloadBase = { name: "Aaron" };
const payloadWithA = addA(payloadBase);
const payloadWithAB = addB(payloadWithA);

// 此时类型为 Base & ExtA & ExtB
const correctType = handler(payloadWithAB);

方案2：手动指定变量的联合类型 #

如果需要复用同一个变量，可以手动指定变量的初始类型为所有可能类型的联合，让TypeScript在赋值时自动收窄类型：

type Base = {
  name: string;
};

type ExtA = {
  type: "a";
  address: string;
};

type ExtB = {
  type: "b";
  streetName: string;
};

function handler<T extends Base>(input: T): T {
  return input;
}

const addA = <T extends Base>(payload: T): T & ExtA => {
  return {
    ...payload,
    type: "a",
    address: "123 Fake St",
  };
};

const addB = <T extends Base>(payload: T): T & ExtB => {
  return {
    ...payload,
    type: "b",
    streetName: "Main",
  };
};

// 手动指定变量的可选类型范围
let payload: Base | (Base & ExtA) | (Base & ExtA & ExtB) = { name: "Aaron" };

payload = addA(payload); // 类型自动收窄为 Base & ExtA
payload = addB(payload); // 类型自动收窄为 Base & ExtA & ExtB

const correctType = handler(payload); // 类型正确

方案3：使用类型断言（不推荐，仅临时应急） #

如果不想创建新变量，可以使用类型断言强制告知TypeScript变量的当前类型，但这种方式会跳过部分类型检查，存在类型不匹配的风险：

type Base = {
  name: string;
};

type ExtA = {
  address: string;
};

type ExtB = {
  streetName: string;
};

function handler<T extends Base>(input: T): T {
  return input;
}

const addA = <T extends Base>(payload: T): T & ExtA => {
  return {
    ...payload,
    type: "a",
    address: "123 Fake St",
  };
};

const addB = <T extends Base>(payload: T): T & ExtB => {
  return {
    ...payload,
    type: "b",
    streetName: "Main",
  };
};

let payload = { name: "Aaron" };

payload = addA(payload) as Base & ExtA;
payload = addB(payload) as Base & ExtA & ExtB;

const correctType = handler(payload); // 类型正确

额外优化 #

注意你的addA和addB函数返回的对象包含type属性，但ExtA和ExtB类型中没有定义该属性，建议修正类型定义，让类型与实际返回值一致，避免类型不一致的隐患。

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