TypeScript中如何使用带key的for...in？JSX转TSX类型报错如何解决？

问题的核心是TypeScript的静态类型校验触发了类型不匹配，JavaScript本身不做类型校验，所以JSX中可以正常运行。你定义的IParams接口中started_at和ended_at为Date类型，如果你实际给这两个字段赋值的是字符串格式的日期（比如接口返回的ISO日期字符串、表单输入的日期字符串、时间戳字符串），就会出现类型错误。

解决方案可根据你的实际业务场景选择： #

• 如果业务中这两个字段需要存储为Date对象，赋值时将字符串转为Date类型即可：

// 示例：原错误写法
const params: IParams = {
  user_id: "xxx",
  first: 10,
  started_at: "2024-01-01",
  ended_at: "2024-01-31"
}

// 修正后写法
const params: IParams = {
  user_id: "xxx",
  first: 10,
  started_at: new Date("2024-01-01"),
  ended_at: new Date("2024-01-31")
}

如果是时间戳，直接把时间戳作为参数传入new Date()即可完成转换。

• 如果业务中这两个字段本身就是以字符串形式使用（比如直接传给后端接口、渲染到页面），直接调整接口的类型定义即可：

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

• 如果两个字段可能是Date类型也可能是字符串类型，可以用联合类型兼容两种场景：

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

注：如果是通过请求库发送参数给后端，Date对象在序列化时会自动转为ISO标准日期字符串，和直接传字符串的效果一致，不需要额外处理。

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