TypeScript函数中如何使用字符串与对象？联合类型报错求助

你遇到的问题本质是TypeScript的类型收窄机制：联合类型AMessyUnion包含string和对象类型，在未明确区分类型时，TS只允许访问所有类型共有的属性。string没有value属性，所以直接访问data?.value会触发类型错误。

解决方法：通过类型守卫收窄类型 #

1. 使用typeof基础类型守卫

这是处理原始类型与对象类型混合最直接的方式：

type AMessyUnion = string | { value: string, param: boolean, paramTwo: boolean };

function processData(data: AMessyUnion) {
  if (typeof data === 'string') {
    // 此处TS已推断data为string类型
    console.log('字符串内容:', data);
  } else {
    // 排除string后，TS自动确定data为对象类型，可安全访问value等属性
    console.log('对象value:', data.value);
    console.log('参数状态:', data.param, data.paramTwo);
  }
}

2. 自定义类型守卫函数

如果对象类型逻辑复杂，或需要复用判断逻辑，可以写自定义守卫：

type AMessyUnion = string | { value: string, param: boolean, paramTwo: boolean };

// 自定义类型守卫，明确返回类型判断结果
function isDataObject(data: AMessyUnion): data is { value: string, param: boolean, paramTwo: boolean } {
  return typeof data === 'object' && data !== null && 'value' in data;
}

function processData(data: AMessyUnion) {
  if (isDataObject(data)) {
    // 此处data已被收窄为对象类型
    console.log(data.value);
  } else {
    console.log(data);
  }
}

扩展：创建接收不同属性参数的函数 #

除了联合类型，还可以用以下方式处理多属性参数：

1. 函数重载

明确不同参数类型的处理逻辑，提升代码可读性：

// 定义重载签名，声明支持的参数类型
function handleInput(input: string): void;
function handleInput(input: { value: string, param: boolean, paramTwo: boolean }): void;

// 实现函数逻辑
function handleInput(input: AMessyUnion) {
  if (typeof input === 'string') {
    console.log('处理字符串输入:', input);
  } else {
    console.log('处理对象输入:', input.value, input.param);
  }
}

2. 可选属性与交叉类型

如果是对象参数存在属性差异，可以用可选属性或交叉类型：

// 基础必选属性 + 可选扩展属性
type InputParams = { value: string } & { param?: boolean, paramTwo?: boolean };

function handleParams(params: InputParams) {
  console.log('必选value:', params.value);
  // 仅当param存在时处理
  if (params.param !== undefined) {
    console.log('可选param:', params.param);
  }
}

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