TypeScript React项目：如何强制接口属性类型检查？

一、编译时报错拦截（最简快速） #

先给API返回的queryResult元素定义准确类型，让TypeScript在编译阶段就检测到类型不匹配，避免静默赋值：

// 定义API返回的元素类型
interface IApiBookingElement {
  id: string;
  fields: {
    vItemIdLookupId: string;
    vLayoutNameLookupId: string;
    vUserLookupId: string;
    vBookingDate: Date;
  };
  lookup: {
    vItemIdLookupId: { Title: string };
    vLayoutNameLookupId: { Title: string };
  };
}

// 给queryResult指定类型
const queryResult: IApiBookingElement[] = /* API返回数据 */;

let vBookingItems: IBooking[] = [];
queryResult.forEach(element =>
  vBookingItems.push({
    id: element.id, // TypeScript编译时直接报错：类型"string"不能赋值给类型"number"
    gridItemId: element.fields.vItemIdLookupId, // 同上报错
    gridItemName: element.lookup.vItemIdLookupId.Title,
    layoutNameId: element.fields.vLayoutNameLookupId, // 同上报错
    layoutName: element.lookup.vLayoutNameLookupId.Title,
    userLoginId: element.fields.vUserLookupId, // 同上报错
    date: element.fields.vBookingDate,
  })
);

无需修改现有接口，编译阶段就能拦截类型不匹配问题，避免后续运行时踩坑。

二、自动转换+运行时校验（兼顾编译与运行安全） #

写一个转换函数，批量将字符串ID转为数字，同时做类型校验，确保数据符合IBooking规范：

function toBooking(apiData: IApiBookingElement): IBooking {
  // 定义需要转数字的字段列表
  const numericFields = ['id', 'gridItemId', 'layoutNameId', 'userLoginId'] as const;
  const booking: Partial<IBooking> = {
    gridItemName: apiData.lookup.vItemIdLookupId.Title,
    layoutName: apiData.lookup.vLayoutNameLookupId.Title,
    date: apiData.fields.vBookingDate,
  };

  // 批量转换并校验数字有效性
  numericFields.forEach(field => {
    // 根据字段名匹配API数据中的对应值
    const value = field === 'id' ? apiData.id : apiData.fields[field];
    const numValue = parseInt(value, 10);
    if (isNaN(numValue)) {
      throw new Error(`无效数字字段 ${field}: ${value}`);
    }
    booking[field] = numValue;
  });

  return booking as IBooking;
}

// 使用时直接映射转换
let vBookingItems: IBooking[] = queryResult.map(toBooking);

该方案既解决了编译时类型校验，又自动完成字符串到数字的转换，还能在运行时拦截无效数字（比如非数字字符串），避免后续逻辑异常。

三、关于是否转类的问题 #

不需要将接口转为类并使用getter/setter，上述两种方案已足够简单且满足需求。类的封装会增加代码复杂度，完全没必要为该场景额外引入。

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