无法使用打字稿向对象文字添加新属性

时间:2019-09-08 11:51:01

标签: javascript angular typescript object

对于stackoverflow也有同样的问题,但是他们接受的答案对我不起作用,因为它们都没有使用对象文字。不浪费您的时间。这是我的代码。

contribute.component.ts contribute只是我用ng generate component contribute创建的组件的名称。)

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-contribute',
  templateUrl: './contribute.component.html',
  styleUrls: ['./contribute.component.css']
})
export class ContributeComponent implements OnInit {
  makeNewPost={}; //THI IS MY EMPTY OBJECT TO WHICH I WANT TO ADD PROPERTIES LATER IN THIS CODE

  constructor(private _auth: AuthService) { }

  ngOnInit() {
      //SOME CODE
  }

  //THIS FUNCTION WILL BE CALLED ON CLICK EVENT FROM `contribute.component.html`
  onSubmit() {
    var email = (<HTMLInputElement>document.getElementById("email")).value;
    var password = (<HTMLInputElement>document.getElementById("password")).value;

    console.log(email); //SEEMS GOOD ON CONSOLE
    console.log(password); //SEEMS GOOD ON CONSOLE

    //THESE TWO PROPERTIES I WANT TO ADD
    this.makeNewPost.email=email;
    this.makeNewPost.password=password;

    this._auth.registerNewt(this.makeNewPost)
    .subscribe (
      res => console.log(res),
      err => console.log(err)
    );
  }
}

但是我的知识说对象在ts中是可变的。那为什么我会收到这个错误。

  

错误TS2339:类型“ {}”上不存在属性“电子邮件”。   错误TS2339:类型“ {}”上不存在属性“密码”。

请告诉我打字稿中的对象是否错误

我还尝试将对象声明为:

makeNewPost= {
  email: string;
  password: string;
}

PS:这是一个Angular 8项目

3 个答案:

答案 0 :(得分:2)

TypeScript最重要的一点是它为变量提供了静态类型。当你做

 makeNewPost={};

...由于尚未为makeNewPost指定类型,因此TypeScript会从{}推断出类型,并使其成为没有属性的类型。当然,稍后,您将尝试添加属性,但是虽然在JavaScript中很好用,但使用TypeScript的静态类型却是一个问题。

解决方案是先包含属性,然后更改其值:

 makeNewPost = {
    email: "",
    password: ""
 };

现在,TypeScript会将类型推断为具有两个字符串的emailpassword属性的对象,您以后可以分配给它们。


您最初没有添加属性,尽管这可能是最干净的解决方案。您可以为makeNewPost定义类型,并使属性可选(属性定义中的?):

interface NewPost {
    email?: string;
    password?: string;
}

然后使用该类型:

makeNewPost: NewPost = {};

稍后,您将可以分配属性,因为允许它们存在。

不过,我不会这样做,因为当您实际需要撰写新帖子时,这些属性不是可选的。

第三种方法是定义没有可选属性的类型:

interface NewPost {
    email: string;
    password: string;
}

...并声明makeNewPostPartial<NewPost>

makeNewPost: Partial<NewPost> = {};

您将this._auth.registerNewt接受NewPost,而不是Partial<NewPost>,但是在您说完之后使用类型断言(本质上)“我已经填写好了:”

this.makeNewPost.email = email;
this.makeNewPost.password = password;

this._auth.registerNewt(this.makeNewPost as NewPost)
// ...

答案 1 :(得分:1)

您正在使用TypeScript。您可以为“发布”创建类型:

export interface Post{
  email : String
  password : String
}

然后声明makeNewPostPost类型,并立即使用您的值将其初始化:

let makeNewPost: Post = {
  email : email,
  password : password
}

答案 2 :(得分:1)

如果您事先不知道对象的属性,则可以进行以下自定义类型:

type NewObject = {[key: string]: any};
let newObject: NewObject = {};
newObject.property = 'value';