in my Angular app i have a component:
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);
}
}
but in the "makes" property I have a mistake. I dont know what to do with it...
This question is related to
javascript
angular
typescript
Just go to tsconfig.json and set
"strictPropertyInitialization": false
to get rid of the compilation error.
Otherwise you need to initialize all your variables which is a little bit annoying
As of TypeScript 2.7.2, you are required to initialise a property in the constructor if it was not assigned to at the point of declaration.
If you are coming from Vue, you can try the following:
Add "strictPropertyInitialization": true
to your tsconfig.json
If you are unhappy with disabling it you could also try this makes: any[] | undefined
. Doing this requires that you access the properties with null check (?.
) operator i.e. this.makes?.length
makes!: any[];
, this tells TS that the value will be assigned at runtime.Can't you just use a Definite Assignment Assertion? (See https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions)
i.e. declaring the property as makes!: any[];
The ! assures typescript that there definitely will be a value at runtime.
Sorry I haven't tried this in angular but it worked great for me when I was having the exact same problem in React.
Get this error at the time of adding Node in my Angular project -
TSError: ? Unable to compile TypeScript: (path)/base.api.ts:19:13 - error TS2564: Property 'apiRoot Path' has no initializer and is not definitely assigned in the constructor.
private apiRootPath: string;
Solution -
Added "strictPropertyInitialization": false
in 'compilerOptions' of tsconfig.json.
my package.json -
"dependencies": {
...
"@angular/common": "~10.1.3",
"@types/express": "^4.17.9",
"express": "^4.17.1",
...
}
If you want to initialize an object based on an interface you can initialize it empty with following statement.
myObj: IMyObject = {} as IMyObject;
The error is legitimate and may prevent your app from crashing. You typed makes
as an array but it can also be undefined.
You have 2 options (instead of disabling the typescript's reason for existing...):
1. In your case the best is to type makes
as possibily undefined.
makes?: any[]
// or
makes: any[] | undefined
In this case the compiler will inform you whenever you try to access to makes
that it could be undefined.
For exemple if the // <-- Not ok
lines below are executed before getMakes
finished or if getMakes
fails, your app will crash and a runetime error will be thrown.
makes[0] // <-- Not ok
makes.map(...) // <-- Not ok
if (makes) makes[0] // <-- Ok
makes?.[0] // <-- Ok
(makes ?? []).map(...) // <-- Ok
2. You can assume that it will never fail and that you will never try to access it before initialization by writing the code below (risky!). So the compiler won't take care about it.
makes!: any[]
You either need to disable the --strictPropertyInitialization
that
Sajeetharan referred to, or do something like this to satisfy the initialization requirement:
makes: any[] = [];
We may get the message Property has no initializer and is not definitely assigned in the constructor
when adding some configuration in the tsconfig.json
file so as to have an Angular project compiled in strict mode:
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"noImplicitThis": true,
"alwaysStrict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
Indeed the compiler then complains that a member variable is not defined before being used.
For an example of a member variable that is not defined at compile time, a member variable having an @Input
directive:
@Input() userId: string;
We could silence the compiler by stating the variable may be optional:
@Input() userId?: string;
But then, we would have to deal with the case of the variable not being defined, and clutter the source code with some such statements:
if (this.userId) {
} else {
}
Instead, knowing the value of this member variable would be defined in time, that is, it would be defined before being used, we can tell the compiler not to worry about it not being defined.
The way to tell this to the compiler is to add the ! definite assignment assertion
operator, as in:
@Input() userId!: string;
Now, the compiler understands that this variable, although not defined at compile time, shall be defined at run-time, and in time, before it is being used.
It is now up to the application to ensure this variable is defined before being used.
As an an added protection, we can assert the variable is being defined, before we use it.
We can assert the variable is defined, that is, the required input binding was actually provided by the calling context:
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();
}
Knowing the variable was defined, the variable can now be used:
ngOnChanges() {
this.userService.get(this.userId)
.subscribe(user => {
this.update(user.confirmedEmail);
});
}
Note that the ngOnInit
method is called after the input bindings attempt, this, even if no actual input was provided to the bindings.
Whereas the ngOnChanges
method is called after the input bindings attempt, and only if there was actual input provided to the bindings.
You can also do the following if you really don't want to initialise it.
makes?: any[];
Go to your tsconfig.json
file and change "noImplicitReturns": false
then add "strictPropertyInitialization": false
to your tsconfig.json
file under "compilerOptions"
property. Here is what my tsconfig.json
file looks like
tsconfig.json
{
...
"compilerOptions": {
....
"noImplicitReturns": false,
....
"strictPropertyInitialization": false
},
"angularCompilerOptions": {
......
}
}
Hope this will help !! Good Luck
It is because TypeScript 2.7 includes a strict class checking where all the properties should be initialized in the constructor. A workaround is to add
the !
as a postfix to the variable name:
makes!: any[];
change the
fieldname?: any[];
to this:
fieldname?: any;
When you upgrade using [email protected] , its compiler strict the rules follows for array type declare inside the component class constructor.
For fix this issue either change the code where are declared in the code or avoid to compiler to add property "strictPropertyInitialization": false in the "tsconfig.json" file and run again npm start .
Angular web and mobile Application Development you can go to www.jtechweb.in
Source: Stackoverflow.com