TypeScript 数组条件插入困扰？教你修复类型错误！

2024-03-11 18:36:30

TypeScript 数组中的条件插入：修复类型错误

问题

在使用 RenderFormFields 组件时，TypeScript 数组中出现了类型错误。错误消息提示 type 属性的类型不兼容，无法将字符串类型分配给 select 类型。有趣的是，当条件插入部分从数组中删除时，类型错误就会消失。

代码示例

以下是引发类型错误的代码示例：

const formFieldsData = [
    {
      data: businessIndustryOptions,
      name: 'businessInformation.industryType',
      title: 'Business Industry',
      type: 'select',
    },
// 当我移除这个条件插入时，类型错误消失了！
    ...(industryType === 'Other' ? [{ 
      name: 'businessInformation.otherIndustryType',
      title: 'Other Business Industry Type',
      type: 'text',
    }] : [{}]),
    // 其他字段
];

解决方法

要解决此类型错误，需要在 formFieldsData 数组中正确设置条件插入。在示例中，otherIndustryType 字段应在 industryType 字段等于“其他”时有条件地插入。

正确的代码如下：

const formFieldsData = [
    {
      data: businessIndustryOptions,
      name: 'businessInformation.industryType',
      title: 'Business Industry',
      type: 'select',
    },
    ...(industryType === 'Other' ? [{ // 使用解构运算符"..."有条件地插入对象
      name: 'businessInformation.otherIndustryType',
      title: 'Other Business Industry Type',
      type: 'text',
    }] : []), // 如果条件不满足，则插入一个空数组
    // 其他字段
];