React TypeScript联合类型报错：属性不存在于APIResponseA|APIResponseB

当你使用APIResponseA | APIResponseB联合类型时，TypeScript仅允许访问两个类型共同拥有的属性（比如a、b）。对于c、d、e这类只有单个类型存在的属性，TypeScript无法确定当前details属于哪个类型，因此会抛出类型错误。以下是几种可行的解决方案：

方案1：使用类型守卫（推荐） #

类型守卫能让TypeScript精准推断出当前details的具体类型，从而安全访问独有属性。

方式A：给接口添加区分字段（最清晰） #

如果可以修改API响应结构，给两个接口新增一个用于区分的字面量类型字段：

interface APIResponseA {
  type: 'A'; // 新增固定值区分字段
  a: string[];
  b: number;
  c: string | null;
}

interface APIResponseB {
  type: 'B'; // 新增固定值区分字段
  a: string[] | null;
  b: number;
  d: number;
  e: string;
}

之后在组件中通过type字段判断类型，TypeScript会自动推断：

let values: IValues;
if (props.details.type === 'A') {
  // 此处TypeScript确定details是APIResponseA
  values = {
    a: props.details.a || [],
    b: props.details.b || 0,
    c: props.details.c || "",
    d: 0, // 给B类型字段设默认值
    e: ""
  };
} else {
  // 此处TypeScript确定details是APIResponseB
  values = {
    a: props.details.a || [],
    b: props.details.b || 0,
    c: "", // 给A类型字段设默认值
    d: props.details.d || 0,
    e: props.details.e || ""
  };
}

方式B：用in操作符做类型守卫（无需修改API） #

如果不能修改API响应，直接通过in操作符检查属性是否存在：

let values: IValues;
if ('c' in props.details) {
  // TypeScript推断为APIResponseA
  values = {
    a: props.details.a || [],
    b: props.details.b || 0,
    c: props.details.c || "",
    d: 0,
    e: ""
  };
} else {
  // TypeScript推断为APIResponseB
  values = {
    a: props.details.a || [],
    b: props.details.b || 0,
    c: "",
    d: props.details.d || 0,
    e: props.details.e || ""
  };
}

方案2：类型断言（简单但需谨慎） #

如果你能100%确定当前details的具体类型，可以用类型断言强制告诉TypeScript类型：

const values: IValues = {
  a: props.details.a || [],
  b: props.details.b || 0,
  c: (props.details as APIResponseA)?.c || "",
  d: (props.details as APIResponseB)?.d || 0,
  e: (props.details as APIResponseB)?.e || ""
};

⚠️ 注意：如果实际类型和断言不符，会导致运行时错误，仅适合类型确定的场景。

方案3：泛型组件（优雅复用） #

如果需要更灵活的组件复用，可以把组件改成泛型，让调用方负责处理对应类型的字段：

// 定义联合类型别名
type APIResponse = APIResponseA | APIResponseB;

interface IProps<T extends APIResponse> {
  details: T;
  // 让调用方传入初始化values的逻辑
  getInitialValues: (details: T) => IValues;
}

function MyForm<T extends APIResponse>(props: IProps<T>) {
  const values = props.getInitialValues(props.details);
  // 后续Formik逻辑
  return <Formik initialValues={values} /* 其他Formik配置 */ />;
}

调用组件时，各自处理对应类型的字段：

// 页面A使用APIResponseA
<MyForm 
  details={apiResponseA} 
  getInitialValues={(details) => ({
    a: details.a || [],
    b: details.b || 0,
    c: details.c || "",
    d: 0,
    e: ""
  })} 
/>

// 页面B使用APIResponseB
<MyForm 
  details={apiResponseB} 
  getInitialValues={(details) => ({
    a: details.a || [],
    b: details.b || 0,
    c: "",
    d: details.d || 0,
    e: details.e || ""
  })} 
/>

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