array.push 类型中缺少以下属性

Question

我在 IONIC 中的注册页面有问题。

现在我正在使用存储所有数据的 data.json 文件，我想在这里创建另一个用户（成员）。要创建会员，我只需要一些用户信息（姓名、邮件和密码），但用户信息存在更多数据。

我得到的错误是我的 arrayPush 缺少以下属性（我不想添加的属性，而是留空）。

这是我的TS

import {Component, Input, AfterViewInit, Output, OnInit} from '@angular/core';
import { async } from '@angular/core/testing';
import { Router } from '@angular/router';
import {AlertController, ModalController, NavParams} from '@ionic/angular';
import data from '../../../../data.json'

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
  @Input() fullName = '';
  @Input() email = '';
  @Input() password = '';
  @Input() repeatPassword = '';

  messageString: string;
  today = new Date();

  constructor(private router: Router, private alertController: AlertController) {
  }

  ngOnInit() {}

  onRegister() {
    //Grab data from HTML inputs and check if valid. If not popup.
    if (this.fullName === '') {this.messageString = "You didn't enter a name.";this.errorMessage();return;}
    if (this.email === '') {this.messageString = "You didn't enter an mail address.";this.errorMessage();return;}
    if (this.password === '') {this.messageString = "You didn't enter a password.";this.errorMessage();return;}
    if (this.password != this.repeatPassword) {this.messageString = "The passwords don't match.";this.errorMessage();return;}

    var firstname = this.fullName.split(" ")[0];
    var lastname = this.fullName.split(" ").pop();
    
    //save all data to JSON
    (data).members.push({ 
      fullname: this.fullName,
      firstname: firstname,
      lastname: lastname,
      mail: this.email,
      password: this.password,
    });
    
    //Redirect to homepage.
    this.router.navigateByUrl('/home').then(r => {});
  }
  
  // Alert emails dont match
  async errorMessage() {
    const alert = await this.alertController.create({
      cssClass: 'alerts',
      header: 'ERROR',
      message: this.messageString,
      buttons: [
        {
          text: 'Okay',
          cssClass: 'yes'
        }
      ]
    });
    await alert.present();
  }

}

这是我的 data.json

{
  "members": [
    {
      "id": 1,
      "gender": "0",
      "fullname": "X X",
      "firstname": "X",
      "infix": "",
      "lastname": "X",
      "number": "06-12345678",
      "mail": "user@company.com",
      "image": "https://pbs.twimg.com/media/EHMN4bVWoAUXhUz.jpg",
      "password": "admin1",
      "birthdate": "14-07-2001",
      "country": "Netherlands",
      "address": "Testweg 1a",
      "state": "Noord Holland",
      "city": "Amsterdam",
      "zip": "1234BC",
      "subscription": "26 Dec. 2020"
    }
  ]
}

到目前为止，我只想为新用户填写以下 JSON 个对象全名、名字、姓氏、电子邮件、密码

Answer 1

前言：我不完全确定代码的总体意图是什么，但下面的答案涉及您提到的类型问题。但是显示的代码推送到 read 的数据数组，最初是从 data.json，并且（在显示的代码中）似乎没有将该数组保存在任何地方。由于，推送到该数组对 data.json 文件没有影响，仅影响内存中的数组。

听起来 TypeScript 正在从 data.json 推断出 data 的类型，因为您没有明确给出类型。 TypeScript 不会（不能）推断属性应该是可选的。为此，您必须指定它。

您可以通过多种方式做到这一点。

自己在类型定义中列出所有属性。
列出类型定义中的所有可选属性，允许推断其他（必需）属性。
在类型定义中列出所有必需的属性，允许推断其他（可选）属性。

其中，最后一个似乎对您描述的内容最有用：

import sampleData from "../../../../data.json";

type MemberType =
    Partial<typeof sampleData["members"][number]>
    & Pick<
        typeof sampleData["members"][number],
        "fullname" | "firstname" | "lastname" | "mail" | "password"
    >;

const data: typeof sampleData & {members: MemberType[]} = sampleData;

Playground link

这让 TypeScript 从 data.json 推断出类型，但随后我们将所有属性设为可选，然后用其原始的非可选定义覆盖那些应该需要的属性。

array.push 类型中缺少以下属性

array.push is missing the following properties from type

arrays

json

typescript

ionic-framework

angular