如何对 TypeScript 接口属性强制执行类型检查？

Question

我正在研究一个 TypeScript React 项目，它具有像这样定义的其他接口。 问题是，这似乎只是在 VSCode 中告诉我，我推入数组的 object 的类型应该是什么。 但是当它实际被执行时，它会接受任何东西并与之一起运行直到其他东西中断。

export interface IBooking {
  id: number;
  layoutName: string;
  gridItemId: number;
  gridItemName: string;
  userLoginId: number;
  layoutNameId: number;
  date: Date;
}

下面是填充 IBooking 对象数组以传递给应用程序的 React 部分的代码。 不幸的是，API 查询结果将这些 id 格式化为字符串，尽管它们是数字。 而 TypeScript 只是简单地获取这些字符串数字，将它们扔到属性中并继续前进，这最终会导致一堆 === 检查与实际数字的比较失败。

let vBookingItems: IBooking[] = [];
...
queryResult.forEach(element =>
  vBookingItems.push({
    id: element.id, // actually a string
    gridItemId: element.fields.vItemIdLookupId, // actually a string
    gridItemName: element.lookup.vItemIdLookupId.Title,
    layoutNameId: element.fields.vLayoutNameLookupId, // actually a string
    layoutName: element.lookup.vLayoutNameLookupId.Title,
    userLoginId: element.fields.vUserLookupId, // actually a string
    date: element.fields.vBookingDate,
  })
);

我知道我必须更改接口类型或 API 结果的某些内容以使类型最终匹配，但这是一项更大的任务，因为我不是启动该项目的人，我只是在扩展在上面。

所以我现在的问题是：让 TypeScript 关注它获取的类型的最简单方法是什么，或者至少尝试将字符串解析为这 4 个属性的数字，而无需我在每个属性上手动运行parseInt() ，或者在至少抱怨:any与所需的类型不匹配，所以这不会像现在这样悄无声息地中断。

我是否需要将接口转换为 class 并使用 getter 和 setter，或者这里最好的解决方案是什么？

Answer 1

Typescript 在编译时运行，而不是在运行时运行。 因此，它无法知道您将在运行时从 API（从外部 Typescript 代码）获得什么样的数据，因此必须相信您会正确输入外部数据。

它也不能在类型之间自动转换数据——你需要使用显式的 parseInt 或依赖于 js 坦率地说奇怪的类型转换规则。

我通常的方法是as RecordTypeRaw提供fetch() function 的返回，然后清理它并依赖于从那一点开始的类型推断。

显式总是比隐式好。 编写四次parseInt()并没有花几天时间调试为什么语言将 API 的返回值更改为数字那么糟糕。