TypeScript接口多类型字段处理及TS2339错误修复方案

问题描述 #

我定义了如下TypeScript接口：

export interface StyledTableProps {
    $gridTemplateColumns:
        | Array<{
                min: string;
                max: string;
          }>
        | {
                min?: string;
                max?: string;
                repeat: number;
          }
        | {
                size: string;
                repeat: number;
          };
}

在处理$gridTemplateColumns字段时，编写了以下代码出现TS2339错误：

if (Array.isArray($gridTemplateColumns)) {
    // 相关逻辑，TypeScript无报错
} else if ($gridTemplateColumns.size) {
    // TS2339: Property size does not exist on type
    // 对应处理逻辑
}

该字段包含三种类型变体：

• 包含min和max字段的对象数组；
• 仅repeat为必填项，min和max可选的对象；
• size和repeat均为必填项，且不允许其他字段的对象。

需要实现类型安全的检查，修复报错同时避免拼写错误。

解决方案 #

1. 优化接口定义，明确类型互斥 #

将三个子类型拆分为独立接口，并通过never类型明确互斥字段，避免类型混淆：

// 数组元素的子类型
interface ColumnMinMax {
  min: string;
  max: string;
}

// 带repeat+可选min/max的类型
interface ColumnRepeatMinMax {
  repeat: number;
  min?: string;
  max?: string;
  // 明确禁止size字段，避免与另一种对象类型混淆
  size?: never;
}

// 带repeat+必填size的类型
interface ColumnRepeatSize {
  repeat: number;
  size: string;
  // 明确禁止min/max字段
  min?: never;
  max?: never;
}

// 重构后的主接口
export interface StyledTableProps {
  $gridTemplateColumns: ColumnMinMax[] | ColumnRepeatMinMax | ColumnRepeatSize;
}

2. 使用类型守卫函数区分对象类型 #

编写自定义类型守卫，让TypeScript能准确推断对象类型：

// 类型守卫：判断是否为ColumnRepeatSize类型
function isColumnRepeatSize(
  obj: ColumnRepeatMinMax | ColumnRepeatSize
): obj is ColumnRepeatSize {
  // 检查size字段存在且不为undefined
  return 'size' in obj && obj.size !== undefined;
}

3. 安全处理各类型分支 #

通过数组判断+类型守卫，实现无报错的类型安全处理：

const handleGridColumns = (props: StyledTableProps) => {
  const { $gridTemplateColumns } = props;

  if (Array.isArray($gridTemplateColumns)) {
    // 处理数组类型：遍历每个ColumnMinMax对象
    const columns = $gridTemplateColumns.map(col => `minmax(${col.min}, ${col.max})`);
    return `grid-template-columns: ${columns.join(' ')};`;
  } else if (isColumnRepeatSize($gridTemplateColumns)) {
    // 处理size+repeat类型：安全访问size和repeat
    return `grid-template-columns: repeat(${ $gridTemplateColumns.repeat }, ${ $gridTemplateColumns.size });`;
  } else {
    // 处理repeat+可选min/max类型：安全访问repeat、min、max
    const minMax = $gridTemplateColumns.min && $gridTemplateColumns.max 
      ? `minmax(${ $gridTemplateColumns.min }, ${ $gridTemplateColumns.max })`
      : $gridTemplateColumns.min || $gridTemplateColumns.max || '1fr';
    return `grid-template-columns: repeat(${ $gridTemplateColumns.repeat }, ${ minMax });`;
  }
};

关键说明 #

• 用never类型限制互斥字段：确保不会出现同时包含size和min/max的非法对象，TypeScript会在编译阶段拦截此类错误。
• 自定义类型守卫：解决直接访问size时的类型不确定问题，让TypeScript明确当前分支的对象类型。
• 独立接口定义：减少拼写错误概率，若误写字段名（如把size写成szie），TypeScript会直接提示属性不存在。

内容的提问来源于stack exchange，提问作者pro-frontend