TypeScript中如何为HTTP请求的query params指定类型？

报错原因 #

你写的解构语法里冒号的作用是重命名变量，不是指定类型。{firstName: string}的实际含义是：把对象中firstName属性的值取出，赋值给名为string的新变量。你同时给lastName也指定了重命名到string，自然会报「不能重复声明块级作用域变量string」的错误。

核心问题解答 #

解构的花括号内部不能直接指定属性类型，类型注解只能添加在解构表达式的整体位置，不需要逐个给参数分配类型。

正确写法参考 #

写法1：直接给被解构对象加类型断言 #

适合临时使用、不需要复用类型的场景，注意URL query参数默认是可选的，建议加上可选标记：

const { firstName, lastName } = req.query as { firstName?: string; lastName?: string };

如果你确定请求一定携带这两个参数，可以去掉可选标记?，或者用非空断言!手动排除undefined。
如果需要同时做变量重命名+类型指定，写法如下：

const { firstName: userFirstName, lastName: userLastName } = req.query as { firstName?: string; lastName?: string };
// 此时userFirstName类型为 string | undefined

写法2：提前定义请求query类型（更推荐，适合Express等框架场景） #

如果是基于Express的项目，可以直接给Request泛型传入query的类型定义，后续解构时自动获得类型提示，不需要额外写断言：

import type { Request } from 'express';

// 自定义query的类型
interface UserQuery {
  firstName?: string;
  lastName?: string;
}

// 给请求参数指定类型
const userHandler = (req: Request<{}, {}, {}, UserQuery>, res) => {
  // 解构时自动识别firstName、lastName的类型为 string | undefined
  const { firstName, lastName } = req.query;
  // 后续业务逻辑
}

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