如何使用TypeScript在客户端访问服务端变量（含ID自动生成需求）

一、服务端代码修正与逻辑梳理 #

首先你的服务端代码存在逻辑错误：初始计算的newId被request.params.id直接覆盖，导致自动生成ID的逻辑完全失效，且接口流程颠倒（应该先获取最后一条记录来计算新ID，而非先接收ID再查询）。以下是修正后的服务端代码（带中文注释）：

// 服务端代码：创建新记录接口
router.post('/', async (request, response) => {
  try {
    // 1. 从数据库获取最后一条车辆记录
    const lastRecord = await carQueries.getLastCarRecord();
    let newId;

    // 2. 计算递增的新ID
    if (!lastRecord) {
      // 无历史记录时，从初始值5S-1开始
      newId = '5S-1';
    } else {
      // 拆分现有ID的数字部分，递增后重新拼接前缀
      const lastIdNumber = parseInt(lastRecord.id.split('-')[1], 10);
      newId = `5S-${lastIdNumber + 1}`;
    }

    // 3. （可选）将新ID与表单数据一同存入数据库
    // const createdRecord = await carQueries.createCarRecord({ ...request.body, id: newId });

    // 4. 将生成的新ID返回给客户端
    response.status(200).json({ newId });
  } catch (error) {
    console.error('创建记录异常:', error);
    response.sendStatus(500);
  }
});

二、客户端（HTML+TypeScript）实现 #

1. HTML结构 #

<button id="createRecordBtn">创建记录</button>

<form id="recordForm">
  <div>
    <label>记录ID：</label>
    <!-- 设置readonly防止用户手动修改ID -->
    <input type="text" id="recordId" readonly>
  </div>
  <!-- 其他表单字段（如车辆信息等） -->
</form>

2. TypeScript逻辑 #

// 获取DOM元素
const createBtn = document.getElementById('createRecordBtn') as HTMLButtonElement;
const recordIdInput = document.getElementById('recordId') as HTMLInputElement;
const recordForm = document.getElementById('recordForm') as HTMLFormElement;

// 点击"创建记录"按钮时请求新ID
createBtn.addEventListener('click', async () => {
  try {
    // 调用服务端接口获取自动生成的新ID
    const response = await fetch('/api/cars', { method: 'POST' });
    if (!response.ok) throw new Error('获取新ID失败');

    const data = await response.json();
    // 将服务端返回的ID填充到表单字段
    recordIdInput.value = data.newId;

    // 重置表单其他字段，保留ID
    recordForm.reset();
    recordIdInput.value = data.newId;
  } catch (error) {
    console.error('生成ID出错:', error);
    alert('无法生成新记录ID，请稍后重试');
  }
});

三、关键注意事项 #

• 唯一性保障：ID的生成逻辑必须放在服务端，避免多用户并发操作时客户端缓存或计算错误导致ID重复；建议在数据库的ID字段添加唯一约束。
• 扩展性：如果后续需要调整ID格式（如前缀变更、数字位数补零），只需修改服务端的ID拼接逻辑即可，客户端无需改动。

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