IONIC注册页面array.push报错：成员对象缺少必填属性如何解决？

问题根因 #

该报错由TypeScript类型校验触发：直接导入JSON文件时，TS会自动基于JSON内的现有成员推导members数组的元素类型，所有现存字段都会被标记为必填项，你只传入部分字段不符合推导出来的类型要求，因此抛出错误。
另外额外提示：直接修改导入的静态JSON文件数据仅保存在运行内存中，页面刷新后新增的用户数据会丢失，若需持久化存储可搭配localStorage或对接后端接口。

可用解决方案 #

方案1：快速类型断言（适合临时调试、快速实现需求） #

直接将新增的用户对象断言为any跳过类型校验，修改push部分代码即可：

//save all data to JSON
(data).members.push({ 
  fullname: this.fullName,
  firstname: firstname,
  lastname: lastname,
  mail: this.email,
  password: this.password,
} as any);

方案2：显式定义可选类型（更符合TS规范） #

先自定义Member接口，将不需要必填的字段设为可选，导入JSON时指定对应类型：

// 放在TS文件导入语句之后、组件定义之前即可
interface Member {
  id?: number;
  gender?: string;
  fullname: string;
  firstname: string;
  infix?: string;
  lastname: string;
  number?: string;
  mail: string;
  image?: string;
  password: string;
  birthdate?: string;
  country?: string;
  address?: string;
  state?: string;
  city?: string;
  zip?: string;
  subscription?: string;
}
// 修改原来的JSON导入语句，指定类型
import rawData from '../../../../data.json';
const data = rawData as { members: Member[] };

后续直接调用push传入必填字段即可，不会触发类型报错。

方案3：补充所有字段默认值（类型最安全，无需修改类型规则） #

按照JSON原有结构补全所有缺失字段，空字段赋值为空字符串，id可以取现有成员长度+1自动生成：

//save all data to JSON
(data).members.push({ 
  id: data.members.length + 1,
  gender: "",
  fullname: this.fullName,
  firstname: firstname,
  infix: "",
  lastname: lastname,
  number: "",
  mail: this.email,
  image: "",
  password: this.password,
  birthdate: "",
  country: "",
  address: "",
  state: "",
  city: "",
  zip: "",
  subscription: ""
});

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