TypeScript开发基础（5）——用户信息卡片制作（数据类型应用案例）-程序员充电站

前面已经学习了TypeScript中的常用数据类型，下面来看一下它们的简单应用。

首先还是来看一下效果：

每条用户信息包含id、姓名、密码、邮箱、部门、角色、加入日期及是否活跃等信息。

实现步骤：

1. 制作网页显示模板userinfo.html。

这部分主要是显示框架的制作和相应部分的样式设计。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> :root { --primary-color: #3498db; --secondary-color: #2ecc71; --background-color: #f9f9f9; --card-color: #ffffff; --text-color: #333333; --border-color: #e0e0e0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--background-color); color: var(--text-color); line-height: 1.6; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; margin-bottom: 40px; padding: 20px; background: linear-gradient( 135deg, var(--primary-color), var(--secondary-color) ); color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } h1 { font-size: 2.5rem; margin-bottom: 10px; } .description { font-size: 1.1rem; opacity: 0.9; } .controls { display: flex; justify-content: space-between; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; } .search-box, .filter-options { flex: 1; min-width: 250px; } .data-section { margin-bottom: 40px; } .section-title { font-size: 1.8rem; margin-bottom: 20px; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; } .cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; } .card { background-color: var(--card-color); border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .card h3 { color: var(--primary-color); margin-bottom: 10px; } .card p { margin-bottom: 8px; } .status { display: inline-block; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; } .active { background-color: #e8f6f3; color: var(--secondary-color); } .inactive { background-color: #fdeaea; color: #e74c3c; } @media (max-width: 768px) { .controls { flex-direction: column; } .cards-container { grid-template-columns: 1fr; } } </style> </head> <body> <div class="container"> <div class="data-section"> <h2 class="section-title">用户信息卡片</h2> <div class="cards-container" id="usersContainer"> <!-- 用户卡片将通过TypeScript动态生成 --> <script src="user.js"></script> </div> </div> </div> </body> </html>

2. 设计用户信息显示的TypeScript文件user.ts。

这个文件主要由四部分组成。

（1）用户信息接口User。

interface User { id: number; name: string; password: string; email: string; department: string; role: string; isActive: boolean; joinDate: string; }

（2）定义测试数据。

const users:User[] = [ { id: 1, name: "张三", password: "123456", email: "zhangsan@example.com", department: "软件开发部", role: "管理员", isActive: true, joinDate: "2022-01-15", }, { id: 2, name: "李四", password: "123456", email: "lisi@example.com", department: "软件开发部", role: "编辑", isActive: true, joinDate: "2022-03-22", }, { id: 3, name: "王五", password: "123456", email: "wangwu@example.com", department: "测试部", role: "用户", isActive: false, joinDate: "2021-11-05", }, { id: 4, name: "赵六", password: "123456", email: "zhaoliu@example.com", department: "技术部", role: "用户", isActive: true, joinDate: "2023-02-10", }, { id: 5, name: "钱七", password: "123456", email: "qianqi@example.com", department: "技术部", role: "编辑", isActive: false, joinDate: "2022-07-30", }, { id: 6, name: "孙八", password: "123456", email: "sunba@example.com", department: "测试部", role: "管理员", isActive: true, joinDate: "2022-09-18", }, { id: 7, name: "周九", password: "123456", email: "zhoujiu@example.com", department: "软件开发部", role: "用户", isActive: true, joinDate: "2022-05-12", } ];

（3）渲染用户卡片的函数renderUsers。

function renderUsers(usersData:User[]):void { const container = document.getElementById("usersContainer")!; container.innerHTML = ""; usersData.forEach((user) => { const card = document.createElement("div"); card.className = "card"; const statusClass = user.isActive ? "status active" : "status inactive"; const statusText = user.isActive ? "活跃" : "非活跃"; card.innerHTML = ` <h3>${user.name}</h3> <p><strong>密码:</strong> ${user.password}</p> <p><strong>邮箱:</strong> ${user.email}</p> <p><strong>角色:</strong> ${user.role}</p> <p><strong>部门:</strong> ${user.department}</p> <p><strong>加入日期:</strong> ${user.joinDate}</p> <p><span class="${statusClass}">${statusText}</span></p> `; container.appendChild(card); }); }

（4）渲染函数调用

renderUsers(users);

3. 生成user.js文件。

在vscode终端中输入编译命令：tsc user.ts，在当前文件夹下会自动生成user.js文件。最后，直接在浏览器中打开userInfo.html即可。

注意事项：user.ts、user.js和userInfo.html三个文件应当放在同一个文件夹中。

附上user.ts完整代码。

interface User { id: number; name: string; password: string; email: string; department: string; role: string; isActive: boolean; joinDate: string; } // 测试数据 const users:User[] = [ { id: 1, name: "张三", password: "123456", email: "zhangsan@example.com", department: "软件开发部", role: "管理员", isActive: true, joinDate: "2022-01-15", }, { id: 2, name: "李四", password: "123456", email: "lisi@example.com", department: "软件开发部", role: "编辑", isActive: true, joinDate: "2022-03-22", }, { id: 3, name: "王五", password: "123456", email: "wangwu@example.com", department: "测试部", role: "用户", isActive: false, joinDate: "2021-11-05", }, { id: 4, name: "赵六", password: "123456", email: "zhaoliu@example.com", department: "技术部", role: "用户", isActive: true, joinDate: "2023-02-10", }, { id: 5, name: "钱七", password: "123456", email: "qianqi@example.com", department: "技术部", role: "编辑", isActive: false, joinDate: "2022-07-30", }, { id: 6, name: "孙八", password: "123456", email: "sunba@example.com", department: "测试部", role: "管理员", isActive: true, joinDate: "2022-09-18", }, { id: 7, name: "周九", password: "123456", email: "zhoujiu@example.com", department: "软件开发部", role: "用户", isActive: true, joinDate: "2022-05-12", } ]; // 渲染用户卡片 function renderUsers(usersData:User[]):void { const container = document.getElementById("usersContainer")!; container.innerHTML = ""; usersData.forEach((user) => { const card = document.createElement("div"); card.className = "card"; const statusClass = user.isActive ? "status active" : "status inactive"; const statusText = user.isActive ? "活跃" : "非活跃"; card.innerHTML = ` <h3>${user.name}</h3> <p><strong>密码:</strong> ${user.password}</p> <p><strong>邮箱:</strong> ${user.email}</p> <p><strong>角色:</strong> ${user.role}</p> <p><strong>部门:</strong> ${user.department}</p> <p><strong>加入日期:</strong> ${user.joinDate}</p> <p><span class="${statusClass}">${statusText}</span></p> `; container.appendChild(card); }); } renderUsers(users);