如何在NextJS的TS文件中优雅编写原生SQL，提升开发体验？

DevOps 小满

2026-6-13

解决TS文件中编写原生PostgreSQL的换行与转义问题

使用ES6模板字符串替代普通字符串
把原代码里的单引号(')换成反引号(`)，就能直接换行且无需转义单引号。改造你的示例代码如下：

return await query<Conversation>(`
  SELECT c.*, 
         JSON_AGG(JSON_BUILD_OBJECT('id', p.id, 'firstname', p.firstname, 'lastname', p.lastname, 'avatar', p.avatar)) AS members
  FROM conversation AS c
  JOIN conversation_member AS cm ON c.id = cm.conversation_id
  JOIN person AS p ON p.id = cm.member_id
  WHERE c.id IN (
    SELECT conversation_id FROM conversation_member WHERE member_id = $1
  ) AND p.id != $1
  GROUP BY c.id, c.title, c.created_at, c.updated_at, c.last_author
  ORDER BY c.updated_at DESC
`);

PostgreSQL会忽略SQL中的空白字符，模板字符串保留的换行和空格完全不影响执行逻辑。

配置VSCode增强SQL语法支持
安装VSCode插件如SQL Formatter或PostgreSQL，再通过设置让编辑器识别模板字符串中的SQL：
1. 打开VSCode设置（快捷键Ctrl+,）
2. 搜索editor.quickSuggestions，将strings项设为true
3. 部分插件支持通过注释标记模板字符串为SQL，比如在模板字符串前加/* sql */：
```
return await query<Conversation>(/* sql */`
  -- 这里的SQL会被插件识别并提供语法高亮、格式化
`);
```
这样就能获得和SQL文件一致的语法高亮、错误提示和格式化功能。
可选：用轻量标签函数增强SQL处理
如果你需要更优雅地管理参数（已用$1占位符的情况下也能进一步优化），可以自己写一个极简的标签函数，无需引入ORM：
```
function sql(strings: TemplateStringsArray, ...values: any[]) {
  return {
    text: strings.join('$' + (values.length + 1)),
    values
  };
}
// 使用方式
return await query<Conversation>(sql`
  SELECT * FROM conversation WHERE id = ${userId}
`);
```
这个标签函数能帮你更直观地绑定参数，同时完全保留原生SQL的控制权。