[英]Unable to add new properties to an object literal using typescript
对于stackoverflow也有同样的问题,但是他们接受的答案对我不起作用,因为它们都没有使用对象文字。 不浪费您的时间。 这是我的代码。
commit.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项目
TypeScript的主要意义在于它为变量提供了静态类型 。 当你做
makeNewPost={};
...由于您尚未为makeNewPost
指定类型, makeNewPost
TypeScript从{}
推断出它的类型,并使它成为没有属性的类型。 当然,稍后,您尝试添加属性,但是在JavaScript中可以正常使用TypeScript的静态类型,但这是一个问题。
解决方案是先包含属性,然后更改它们的值:
makeNewPost = {
email: "",
password: ""
};
现在,TypeScript会将类型推断为具有email
和password
属性(两个字符串)的对象,您以后可以分配给它们。
您不必一开始就添加属性,尽管这可能是最干净的解决方案。 您可以为makeNewPost
定义类型,并使属性为可选 (属性定义中的?
):
interface NewPost {
email?: string;
password?: string;
}
然后使用该类型:
makeNewPost: NewPost = {};
稍后,您将能够分配属性,因为它们被允许存在。
不过,我不会这样做,因为当您实际需要撰写新文章时,这些属性不是可选的。
第三种方法是定义没有可选属性的类型:
interface NewPost {
email: string;
password: string;
}
...并声明makeNewPost
为Partial<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)
// ...
您正在使用TypeScript。 您可以为“发布”创建类型:
export interface Post{
email : String
password : String
}
然后将makeNewPost
声明为Post
类型,并立即使用您的值将其初始化:
let makeNewPost: Post = {
email : email,
password : password
}
如果您事先不知道对象的属性,则可以进行如下自定义类型:
type NewObject = {[key: string]: any};
let newObject: NewObject = {};
newObject.property = 'value';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.