Introduction of strictNullChecks in Angular 4

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