Introduction of strictNullChecks in Angular 4

Posted By :Ishaan Madan |30th August 2018

With the release of Angular 4.1.1. This angular team fulfilled the promise meant for Angular 4.1 which was Adding the support for strictNullChecks in TypeScript's compiler, added in TypeScript 2.0.


Strict Null Checking = Writing a Safe Code


The transpiler allows us to write the code in a safer manner. Typescript with strictNullChecks enabled becomes way more comfortable for developers with a background in the static-types language. As the matter of fact, without the use of strict null checks, assigning null or undefined to a variable becomes perfectly possible.


// OK
const age: number = 24;
const age: number = null;



For developers friendly with JavaScript, this appears familiar as JavaScript doesn’t performs any sort of type checks during assignment of a variable. But, on the other hand, this behaviour appears quite weird to developers from Swift or C# who have are habitual with the concepts like 'optionals' and 'nullables'. For Eg:


// OK
int age = 24;
int? age = 24;
int? age = null;
// error CS0037: Cannot convert null to 'int' because it is a non-nullable value type
int age = null;


The use of strict null checking in typescript enables a developer to have a similar behavior. The equivalent of the piece of code 'int?' nullable type from C# described above will be 'number | null'. With TypeScript compiler enabled for strictNullChecks, the behavior is :


// OK
const age: number = 24;
const age: number | null = 24;
const age: number | null = null;
const age: number | undefined = undefined;
// TS2322: Type 'null' is not assignable to type 'number'.
const age: number = null;


However, the behavior will be quite sufficient for the developers from a static-typed language environment would anticipate. The strictNullChecks allows to eliminate the careless mistakes made by developers and make the code base more safe by making the explicit occurrence of null —which is an integral characteristic of the static-typed languages.




To allow the use of the new feature of strict null checking, one has to upgrade to Angular 4.1.1 and  TypeScript 2.1 (or later). Subsequently, add the below configuration to the tsconfig.json:

  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "target": "es5",
    "typeRoots": [
    "lib": [


Post enabling the above configuration, we might need to adjust existing type definitions wherever necessary. The compiler will point out towards all the required places in the code base which needs a change.


However, Please note, with this setting enabled, all the third-party libraries/plugins in use must support strictNullChecks.


NOTE: To disable type checking for third-party libraries, we may use 'skipLibCheck'.




To summarize, strictNullChecks can play a great role in preventing careless slips and minor bugs in the code which are generally difficult to recognize. By making the existence of null or undefined variables much more specific, it enhances and strengthens the project's code base—a perfect choice for applications especially which are built on a larger scale. Opting-in is as easy as a process of just adding the line mentioned in above tsconfig.json to yours.



About Author

Ishaan Madan

Ishaan, a skilled technical project manager, excels at breaking down complex projects into manageable tasks. With a background in both technology and project management, he offers a unique perspective to every project he undertakes. His effective communication skills enable him to collaborate seamlessly with both technical and non-technical stakeholders, ensuring everyone is aligned towards shared objectives. He has hands-on experience in utilizing agile methodologies like Scrum and Kanban to drive project management and foster team collaboration. He leverages project management tools such as JIRA, Trello, and Clickup to monitor progress, manage tasks, and facilitate communication among team members and stakeholders. Moreover, his proficiency in full-stack development empowers him to comprehend the technical aspects of projects and provide guidance to developers when necessary. He demonstrates expertise in utilizing popular Python frameworks like Django and Flask, along with data analysis and manipulation libraries such as NumPy and Pandas. On the front-end, Ishaan adeptly employs JavaScript libraries like React and Angular to craft visually appealing and user-friendly interfaces. Additionally, he possesses proficiency in HTML, CSS, and JavaScript for designing responsive and mobile-friendly layouts.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us