如何在TypeScript中实现记录创建时ID从1开始自动递增？

下面是基于HTML、CSS和TypeScript的完整实现方案，包含编号持久化（刷新页面不重置）的逻辑：

HTML 结构 #

<div class="record-container">
  <h3>创建新记录</h3>
  <div class="form-group">
    <label>记录ID:</label>
    <input type="number" id="recordId" readonly>
  </div>
  <button id="createBtn">创建记录</button>

  <h3>已创建记录</h3>
  <ul id="recordList"></ul>
</div>

用只读输入框展示自动生成的ID，搭配创建按钮和记录列表完成基础交互结构。

基础 CSS 样式 #

.record-container {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: inline-block;
  width: 80px;
  margin-right: 10px;
}

input {
  padding: 6px;
  width: 200px;
}

button {
  padding: 8px 16px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}

#recordList {
  list-style: none;
  padding: 0;
}

#recordList li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

简单美化界面，提升交互体验。

TypeScript 核心逻辑 #

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

// 从localStorage读取上次的编号，无数据则初始化为0
let lastRecordId = parseInt(localStorage.getItem('lastRecordId') || '0');

// 页面加载时就显示下一个待生成的编号
updateNextRecordId();

// 创建按钮点击事件
createBtn.addEventListener('click', () => {
  const currentId = lastRecordId + 1;
  
  // 生成记录项并添加到列表
  const listItem = document.createElement('li');
  listItem.textContent = `记录 #${currentId}`;
  recordList.appendChild(listItem);
  
  // 更新编号并持久化存储
  lastRecordId = currentId;
  localStorage.setItem('lastRecordId', lastRecordId.toString());
  
  // 更新输入框的下一个编号
  updateNextRecordId();
});

// 更新输入框显示的待生成编号
function updateNextRecordId() {
  recordIdInput.value = (lastRecordId + 1).toString();
}

逻辑说明： #

• 编号持久化：通过localStorage存储最后生成的编号，避免刷新页面后重置
• 实时填充：页面加载完成后立即计算并显示下一个要生成的编号
• 严格递增：每次点击创建按钮，编号自动+1，同时更新存储和界面显示
• 防篡改：使用只读输入框，避免用户手动修改ID，保证编号的连续性和唯一性

如果需要对接后端接口，只需将生成的ID与其他记录数据一同提交即可，前端的递增逻辑保持不变。

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