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.

 

Opt-in:

 

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": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}
        

 

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'.

 

Summary:

 

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.

 

Thanks


About Author

Ishaan Madan

Ishaan is an experienced Wordpress/PHP Lead Developer, he has good knowledge of HTML, CSS, PHP, Wordpress, Jquery and AJAX. His hobbies are playing basketball and reading about defence.

Request For Proposal

Sending message..

Ready to innovate ? Let's get in touch


Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Chat With Us