如何将 NextJS router.query 转换为数字？答案

【问题标题】：How can I cast NextJS router.query as a number?如何将 NextJS router.query 转换为数字？
【发布时间】：2021-04-17 22:06:13
【问题描述】：

const router = useRouter()
const { photoId } = router.query

我在进行比较时收到此 Typescript 警告：

TS2367：此条件将始终返回“false”，因为类型 “数字”和“字符串” | string[]' 没有重叠。

这很有意义，所以我像这样对变量进行类型转换：

const router = useRouter()
const { photoId } = parseInt(router.query, 10)

但现在我收到了这个警告：

TS2345：“ParsedUrlQuery”类型的参数不可分配给 “字符串”类型的参数。

当我查看 NextJS 路由器的源代码时，我看到了：

interface ParsedUrlQuery extends NodeJS.Dict<string | string[]> { }

看起来我已经非常接近于得到我需要的东西了，它只是一个字符串，而不是一个字符串或字符串数组。我从这里去哪里？

【问题讨论】：

【解决方案1】：

一种解决方案是以这种方式进行铸造：

const photoId = router.query.photoId ? +router.query.photoId : undefined;

查询道具可能未定义，因此您首先检查它是否已定义，使用一元运算符，或者只返回undefined。 integer 的类型将是 number | undefined。当然，请记住 photoId 是否是可以转换为数字的值。

我总是尽量避免使用as，因为打字稿已经不健全，所以这并没有给类型系统本身增加额外的“信任度”。

【讨论】：

【解决方案2】：

你可以告诉编译器应该如何处理这个变量：

const photoId = parseInt(router.query.photoId as string, 10)

注意router.query的属性可以是undefined。

【讨论】：