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

Posted 2023-03-13

【中文标题】array.push 缺少类型中的以下属性

【英文标题】：array.push is missing the following properties from type

【发布时间】：2022-01-11 15:28:12

【问题描述】：

我在 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": "[e-mail]",
      "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 对象 全名、名、姓、电子邮件、密码

【问题讨论】：

与您的问题没有真正的关系，但是您将无法仅通过推送到数组来更改文件系统中的 JSON 文件...实际上我认为没有出于安全原因，修改文件内容的方法。

【参考方案1】：

前言：我不完全确定代码的总体意图是什么，但下面的答案涉及您提到的类型问题。但是显示的代码推送到最初从data.json 读取的数据数组，并且（在显示的代码中）似乎没有将该数组保存在任何地方。与JSON Derulo points out 一样，推送到该数组对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 推断类型，但随后我们将所有属性设为可选，然后用其原始的非可选定义覆盖应该需要的属性。