. Advertisement .
..3..
. Advertisement .
..4..
Since TypeScript 2.7, the “Property has no initializer and is not definitely assigned” has occurred quite a lot. Read on to find out why this version can lead to this error and how you can fix your code.
Property has no initializer and is not definitely assigned
Reproduce The Error
Like JavaScript, TypeScript has supported the class keyword since its introduction in the ECMAScript 2015 standard. If you are coming from JavaScript, both class declarations and expressions are similar.
For instance, this is how many TypeScript developers might declare and create an instance of a class:
class Site {
name: string;
type = "Tutorials";
rank: number;
URL: undefined | string;
constructor(name: string) {
this.name = name;
}
}
const ITTutoria = new Site("ITTutoria");
console.log(ITTutoria.name);
console.log(ITTutoria.type);
console.log(ITTutoria.rank);
console.log(ITTutoria.URL);
This may seem okay at first glance. But when you compile it to JavaScript, this error message will appear:
typescript.ts:4:3 - error TS2564: Property 'rank' has no initializer and is not definitely assigned in the constructor.
4 rank: number;
~~~~
Found 1 error in typescript.ts:4
Here is a fun fact. This error may not happen in older TypeScript versions and some environment settings. To understand why it occurs, you should get to know strict property initialization in TypeScript.
Strict Property Initialization Check in TypeScript
Since the 2.7 version, the TypeScript compiler has another option for checking property initialization:
--strictPropertyInitialization
When you enable this flag, the compiler will raise an error whenever you declare a class property but don’t set it in the constructor.
That is why TypeScript has such a problem with the property rank of the class Site. It appears as a field declaration, but you don’t initialize it in the constructor below.
This issue isn’t raised with other properties of that class. name is set in the constructor. The type property isn’t set, but you have provided a default value. URL isn’t initialized either. But you have declared undefined as one of its potential values, meaning you don’t have to set it.
When strictPropertyInitialization is set to true, you will need to initialize class fields in the constructor itself. The compiler won’t detect initializations by analyzing methods invoked by the constructor. This prevents derived classes from overriding those methods and failing to initialize those properties.
How To Solve The Error
Initialize The Property In The Constructor
The most obvious solution for this little nuisance is to ensure the initialization of the named property in its class constructor.
For instance, this is how you can fix the program above:
class Site {
name: string;
type = "Tutorials";
rank: number;
URL: undefined | string;
constructor(name: string, rank: number) {
this.name = name;
this.rank = rank;
}
}
const ITTutoria = new Site("ITTutoria", 1);
console.log(ITTutoria.name);
console.log(ITTutoria.type);
console.log(ITTutoria.rank);
console.log(ITTutoria.URL);
Output:
ITTutoria
Tutorials
1
undefined
Use Definite Assignment Assertions
The definite assignment assertion feature in TypeScript allows you to tell the compiler that you want a variable to be assigned regardless of whether its analyses can detect so.
This is done with the ! operator:
class Site {
name: string;
type = "Tutorials";
rank!: number;
URL: undefined | string;
constructor(name: string) {
this.name = name;
}
}
const ITTutoria = new Site("ITTutoria");
console.log(ITTutoria.name);
console.log(ITTutoria.type);
console.log(ITTutoria.rank);
console.log(ITTutoria.URL);
Output:
ITTutoria
Tutorials
undefined
undefined
Set strictPropertyInitialization To False
If you don’t want to modify your code, disable the strictPropertyInitialization flag to bypass this error.
You can add it directly as an argument of the tsc command:
tsc --strictPropertyInitialization false
Note: follow this guide if you can’t find the tsc command.
Or add it to your tsconfig.json file:
{
"compilerOptions": {
...
"strictPropertyInitialization": false
}
}
Summary
The “Property has no initializer and is not definitely assigned” error happens because you forget to set a property in its class constructor while the strictPropertyInitialization flag has been enabled. Setting this option to false or initializing that property will solve the problem.
Leave a comment