TypeScript中如何声明双参数数组？表单用户数组存储问题求助

嘿，我来帮你搞定这个问题！首先咱们先理清两个关键点：怎么声明符合你需求的数组，以及修正你当前代码的问题。

1. 如何声明包含用户信息的数组 #

你想要的其实是存储用户对象（或元组）的数组，而不是普通的字符串数组。这里有两种常用的方式：

方式一：对象类型数组（推荐，语义更清晰） #

先定义一个User类型来描述每个用户的结构，再声明数组：

// 定义用户类型，包含username和password两个字段
type User = {
  username: string;
  password: string;
};

// 声明存储User对象的数组
let users: User[] = [];

方式二：元组类型数组 #

如果你更倾向于用固定顺序的数组元素来存储信息，可以用元组：

// 数组的每个元素是[string, string]元组，第一个元素是username，第二个是password
let users: [string, string][] = [];

2. 修正你的表单代码问题 #

你说当前arr[0]只返回username，大概率是因为你把username和password分别push到了数组里，导致数组结构变成了[username1, password1, username2, password2...]，而不是每个元素包含完整的用户信息。

按照上面的类型声明，正确的添加用户方式应该是这样：

使用对象类型的例子：

// 假设从表单获取输入值
const username = document.getElementById("username")?.value || "";
const password = document.getElementById("password")?.value || "";

// 将完整的用户对象push到数组中
users.push({ username, password });

// 此时users[0]就是包含两个字段的对象
console.log(users[0]); // 输出: { username: "xxx", password: "xxx" }
console.log(users[0].username); // 访问用户名
console.log(users[0].password); // 访问密码

使用元组类型的例子：

// 同样获取表单值
const username = document.getElementById("username")?.value || "";
const password = document.getElementById("password")?.value || "";

// 将元组push到数组中
users.push([username, password]);

// 此时users[0]就是包含两个元素的元组
console.log(users[0]); // 输出: ["xxx", "xxx"]
console.log(users[0][0]); // 访问用户名
console.log(users[0][1]); // 访问密码

小建议 #

优先选择对象类型的数组，因为它的可读性更强，后续如果需要给用户添加更多字段（比如邮箱、手机号），扩展起来非常方便，而元组的顺序固定，后期维护容易出错。

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