如何在 TypeScript 中使用 for...in 和键？答案

【问题标题】：How to use for...in with key in TypeScript?如何在 TypeScript 中使用 for...in 和键？
【发布时间】：2021-10-29 13:32:16
【问题描述】：

在将我的 JSX 代码迁移到 TSX 时遇到如下问题：

这是界面：

interface IParams {
  user_id: string;
  first: number;
  started_at: Date;
  ended_at: Date;
}

这段代码在 JSX 中工作，谷歌似乎对此没有明确的答案，我该如何解决这个问题？

谢谢！

NVH

【问题讨论】：

标签： typescript

【解决方案1】：

您可以通过将键的类型定义为显式来使其工作，即

let key: keyof IParams;
for (key in params) {
  url.searchParams.set(key, params[key]);
}

或者，如果您想要做的只是通过使用Object.entries 来获得您可以做到的价值，它看起来像：

for (const [key, value] in Object.entries(params)) {
  url.searchParams.set(key, value);
}

// or if you wanted to use forEach

Object.entries(params).forEach(([key, value]) => {
  url.searchParams.set(key, value);
});

【讨论】：

【解决方案2】：

要允许类型安全索引，您可以将带有 string 键类型的 index signature 添加到类型中。可以在here 找到类似的问题，对于IParams，它看起来像：

interface IParams {
  user_id: string;
  first: number;
  started_at: Date;
  ended_at: Date;
  [key: string]: string | number | Date;
};

或将indexed access types 与keyof 一起使用（如链接问题中所示）：

interface IParams {
  user_id: string;
  first: number;
  started_at: Date;
  ended_at: Date;
  [key: string]: IParams[keyof IParams];
};

这将涵盖向类型添加更多字段的情况。

总之，以下代码对我来说编译和运行良好：

interface IParams {
  user_id: string;
  first: number;
  started_at: Date;
  ended_at: Date;
  [key: string]: IParams[keyof IParams];
};

const params: IParams = {
  user_id: 'user_id',
  first: 0,
  started_at: new Date(),
  ended_at: new Date()
};

for (const key in params) {
  console.log(`${key} = ${params[key]}`);
}

输出如下：

user_id = user_id
first = 0
started_at = Tue Aug 31 2021 16:08:24 GMT+1000 (Australian Eastern Standard Time)
ended_at = Tue Aug 31 2021 16:08:24 GMT+1000 (Australian Eastern Standard Time)

【讨论】：