Javascript 属性'';没有初始值设定项,并且未在构造函数中明确指定
在我的Angular应用程序中,我有一个组件:Javascript 属性'';没有初始值设定项,并且未在构造函数中明确指定,javascript,angular,typescript,Javascript,Angular,Typescript,在我的Angular应用程序中,我有一个组件: import { MakeService } from './../../services/make.service'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-vehicle-form', templateUrl: './vehicle-form.component.html', styleUrls: ['./veh
import { MakeService } from './../../services/make.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-vehicle-form',
templateUrl: './vehicle-form.component.html',
styleUrls: ['./vehicle-form.component.css']
})
export class VehicleFormComponent implements OnInit {
makes: any[];
vehicle = {};
constructor(private makeService: MakeService) { }
ngOnInit() {
this.makeService.getMakes().subscribe(makes => { this.makes = makes
console.log("MAKES", this.makes);
});
}
onMakeChange(){
console.log("VEHICLE", this.vehicle);
}
}
但在“制造”属性中,我犯了一个错误。
我不知道该怎么办
我想您使用的是最新版本的TypeScript。请参阅中的“严格类初始化”部分 有两种方法可以解决此问题: A.如果您使用的是VSCode,则需要更改编辑器使用的TS版本 B.在构造函数中声明数组时,只需初始化数组
makes: any[] = [];
constructor(private makeService: MakeService) {
// Initialization inside the constructor
this.makes = [];
}
您需要禁用 Sajeetharan提到过,或执行类似操作以满足初始化要求:
makes: any[] = [];
这是因为TypeScript 2.7包含一个严格的类检查,所有属性都应该在构造函数中初始化。解决方法是添加
代码>作为变量名称的后缀:
makes!: any[];
只需转到tsconfig.json并设置
"strictPropertyInitialization": false
以消除编译错误
否则,您需要初始化所有变量,这有点烦人如果您确实不想初始化,也可以执行以下操作
makes?: any[];
当您使用升级时typescript@2.9.2,它的编译器严格遵循组件类构造函数内数组类型声明的规则
要解决此问题,请更改代码中声明的代码或避免编译器在“tsconfig.json”文件中添加属性“strictPropertyInitialization”:false,然后再次运行npm start
Angular web和移动应用程序开发您可以访问www.jtechweb。在中,当在tsconfig.json
文件中添加一些配置以使Angular项目在严格模式下编译时,我们可能会得到消息属性没有初始值设定项,并且在构造函数中没有明确分配
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"noImplicitThis": true,
"alwaysStrict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
事实上,编译器会抱怨在使用成员变量之前没有定义成员变量
对于编译时未定义的成员变量示例,具有@Input
指令的成员变量:
@Input() userId: string;
我们可以声明变量可能是可选的,从而使编译器静音:
@Input() userId?: string;
但是,我们必须处理未定义变量的情况,并用一些这样的语句将源代码弄乱:
if (this.userId) {
} else {
}
相反,知道这个成员变量的值将被及时定义,也就是说,它将在使用之前被定义,我们可以告诉编译器不要担心它没有被定义
告诉编译器这一点的方法是添加!明确赋值断言
运算符,如:
@Input() userId!: string;
现在,编译器理解了这个变量,尽管它不是在编译时定义的,但应该在运行时定义,并且在使用之前及时定义
现在由应用程序来确保在使用该变量之前定义该变量
作为一种附加保护,我们可以在使用变量之前断言该变量正在被定义
我们可以断言变量已定义,即所需的输入绑定实际上是由调用上下文提供的:
private assertInputsProvided(): void {
if (!this.userId) {
throw (new Error("The required input [userId] was not provided"));
}
}
public ngOnInit(): void {
// Ensure the input bindings are actually provided at run-time
this.assertInputsProvided();
}
知道变量已定义,现在可以使用该变量:
ngOnChanges() {
this.userService.get(this.userId)
.subscribe(user => {
this.update(user.confirmedEmail);
});
}
注意,ngOnInit
方法在输入绑定尝试后被调用,即使没有向绑定提供实际输入
然而,ngOnChanges
方法是在输入绑定尝试后调用的,并且仅当有实际的输入提供给绑定时才调用。您不能只使用明确的赋值断言吗?(见附件)
i、 e.将属性声明为makes!:任何[]代码>密码!确保typescript在运行时肯定会有一个值
很抱歉,我没有在angular中尝试过这一点,但当我在React中遇到完全相同的问题时,它对我非常有用。从TypeScript 2.7.2开始,如果在声明时未指定构造函数中的属性,则需要在构造函数中初始化该属性
如果您来自Vue,可以尝试以下操作:
- 向tsconfig.json添加
“strictPropertyInitialization”:true
- 如果您对禁用它不满意,您也可以尝试此
makes:any[]| undefined
。执行此操作需要使用null check(?。
)运算符访问属性,即this.makes?.length
- 你不妨试试
makes!:任何[]代码>,这告诉TS将在运行时分配该值
该错误是合法的,可能会阻止你的应用程序崩溃。您键入的使
成为一个数组,但它也可以是未定义的
makes?: any[]
// or
makes: any[] | undefined
您有2个选项(而不是禁用typescript存在的原因…):
1。在您的情况下,最好是键入使
可能未定义
makes?: any[]
// or
makes: any[] | undefined
因此,每当您试图访问makes
时,编译器都会通知您它可能未定义。
否则,如果/更改
fieldname?: any[];
为此:
fieldname?: any;
在我的角度项目中添加节点时获取此错误-
错误:?无法编译类型脚本:
(path)/base.api.ts:19:13-错误TS2564:属性“apiRoot”
路径“”没有初始值设定项,并且未在构造函数中明确指定
私有apiRootPath:字符串
解决方案-
在tsconfig.json的“编译器选项”中添加了“strictPropertyInitialization”:false
mypackage.json-
"dependencies": {
...
"@angular/common": "~10.1.3",
"@types/express": "^4.17.9",
"express": "^4.17.1",
...
}
Ref URL-如果要基于接口初始化对象,可以使用以下语句将其初始化为空
myObj: IMyObject = {} as IMyObject;
转到您的tsconfig.json
文件,更改的“noImplicitReturns”:false
,然后将的“strictPropertyInitialization”:false
添加到下的tsconfig.json
文件中
myObj: IMyObject = {} as IMyObject;
{
...
"compilerOptions": {
....
"noImplicitReturns": false,
....
"strictPropertyInitialization": false
},
"angularCompilerOptions": {
......
}
}
@Input() availableData: HierarchyItem[] | undefined;
@Input() checkableSettings: CheckableSettings | undefined;
export class Test {
constructor(myText:string) {
this.myText= myText;
}
myText: string ;
}