TypeScript数组条件添加对象引发类型错误的解决方法

问题场景 #

使用<RenderFormFields formFields={formFieldsData} />时触发TypeScript类型错误：

Types of property 'type' are incompatible. Type 'string' is not assignable to type '"select"'.ts(2322)
RenderFormFields.tsx(17, 3): The expected type comes from property 'formFields' which is declared here on type 'IntrinsicAttributes & RenderFormFieldsProps'

移除数组中的条件插入代码后，错误消失。相关核心代码如下：

业务组件代码片段 #

export const RefactoredBusinessInformationForm: React.FC = () => {
  // ... 其他逻辑

  const formFieldsData = [
    {
      data: businessIndustryOptions,
      name: 'businessInformation.industryType',
      title: 'Business Industry',
      type: 'select',
    },
    // 问题触发点
    ...(industryType === 'Other' ? [{ 
      name: 'businessInformation.otherIndustryType',
      title: 'Other Business Industry Type',
      type: 'text',
    }] : [{}]),
    // ... 其他字段
  ];

  // ... 渲染逻辑
};

RenderFormFields组件类型定义 #

export interface PrimaryInputField extends PrimaryInputProps {
  type: 'text' | 'number' | 'textarea';
}
interface PrimarySelectField extends PrimarySelectProps {
  type: 'select';
}
type FormField = PrimaryInputField | PrimarySelectField;

interface RenderFormFieldsProps {
  formFields: FormField[];
}

问题原因 #

条件分支中返回的[{}]是空对象数组，TypeScript会以此为依据拓宽整个formFieldsData的类型推断范围，导致原本明确的type属性被推断为宽泛的string类型，与FormField要求的'select'|'text'|'number'|'textarea'联合类型不兼容。

解决方法 #

方法1：条件分支返回空数组而非空对象数组 #

直接在else分支返回空数组，避免引入不符合FormField类型的元素：

const formFieldsData = [
  {
    data: businessIndustryOptions,
    name: 'businessInformation.industryType',
    title: 'Business Industry',
    type: 'select',
  },
  ...(industryType === 'Other' ? [{ 
    name: 'businessInformation.otherIndustryType',
    title: 'Other Business Industry Type',
    type: 'text',
  }] : []), // 替换为[]而非[{}]
  // ... 其他字段
];

方法2：显式指定数组类型 #

给formFieldsData明确指定FormField[]类型，强制TypeScript按照预期类型校验：

import { FormField } from '@common/RenderFormFields'; // 先导入对应类型

const formFieldsData: FormField[] = [
  // ... 原有数组内容
];

方法3：对条件插入的对象做类型断言 #

确保条件分支中的对象符合PrimaryInputField类型，避免类型推断偏差：

...(industryType === 'Other' ? [{ 
  name: 'businessInformation.otherIndustryType',
  title: 'Other Business Industry Type',
  type: 'text',
} as PrimaryInputField] : []),

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