feat: add support for strict null checks (#5094)

Author: crisbeto

e2e/components/tabs-e2e.spec.ts

@@ -75,7 +75,7 @@ describe('tabs', () => {
  */
 async function getFocusStates(elements: ElementArrayFinder) {
   return elements.map(async (element) => {
-    let elementText = await element.getText();
+    let elementText = await element!.getText();
     let activeText = await browser.driver.switchTo().activeElement().getText();
 
     return activeText === elementText;
@@ -98,7 +98,7 @@ function getBodyActiveStates(elements: ElementArrayFinder) {
  */
 async function getClassStates(elements: ElementArrayFinder, className: string) {
   return elements.map(async (element) => {
-    let classes = await element.getAttribute('class');
+    let classes = await element!.getAttribute('class');
     return classes.split(/ +/g).indexOf(className) >= 0;
   });
 }

e2e/tsconfig.json

@@ -5,6 +5,7 @@
     "declaration": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
     "inlineSources": true,
     "lib": ["es2015"],
     "module": "commonjs",

src/cdk/tsconfig-build.json

@@ -7,6 +7,7 @@
     "stripInternal": false,
     "experimentalDecorators": true,
     "noUnusedParameters": true,
+    "strictNullChecks": true,
     "importHelpers": true,
     "newLine": "lf",
     "module": "es2015",

src/demo-app/checkbox/checkbox-demo.ts

@@ -41,6 +41,11 @@ export class MdCheckboxDemoNestedChecklist {
 
   allComplete(task: Task): boolean {
     let subtasks = task.subtasks;
+
+    if (!subtasks) {
+      return false;
+    }
+
     return subtasks.every(t => t.completed) ? true
         : subtasks.every(t => !t.completed) ? false
         : task.completed;

src/demo-app/data-table/data-table-demo.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {PeopleDatabase} from './people-database';
 import {PersonDataSource} from './person-data-source';
 
-export type UserProperties = 'userId' | 'userName' | 'progress' | 'color';
+export type UserProperties = 'userId' | 'userName' | 'progress' | 'color' | undefined;
 
 @Component({
   moduleId: module.id,
@@ -11,7 +11,7 @@ export type UserProperties = 'userId' | 'userName' | 'progress' | 'color';
   styleUrls: ['data-table-demo.css'],
 })
 export class DataTableDemo {
-  dataSource: PersonDataSource;
+  dataSource: PersonDataSource | null;
   propertiesToDisplay: UserProperties[] = [];
 
   constructor(private _peopleDatabase: PeopleDatabase) {

src/demo-app/dialog/dialog-demo.ts

@@ -1,6 +1,6 @@
 import {Component, Inject, ViewChild, TemplateRef} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
-import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
 
 
 @Component({
@@ -10,10 +10,10 @@ import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/ma
   styleUrls: ['dialog-demo.css'],
 })
 export class DialogDemo {
-  dialogRef: MdDialogRef<JazzDialog>;
+  dialogRef: MdDialogRef<JazzDialog> | null;
   lastCloseResult: string;
   actionsAlignment: string;
-  config: MdDialogConfig = {
+  config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
     hasBackdrop: true,

src/demo-app/ripple/ripple-demo.ts

@@ -15,7 +15,7 @@ export class RippleDemo {
   disabled = false;
   unbounded = false;
   rounded = false;
-  radius: number = null;
+  radius: number;
   rippleSpeed = 1;
   rippleColor = '';
 

src/demo-app/snack-bar/snack-bar-demo.ts

@@ -21,7 +21,7 @@ export class SnackBarDemo {
   open() {
     let config = new MdSnackBarConfig();
     config.duration = this.autoHide;
-    config.extraClasses = this.addExtraClass ? ['party'] : null;
-    this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
+    config.extraClasses = this.addExtraClass ? ['party'] : undefined;
+    this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config);
   }
 }

src/demo-app/tsconfig-aot.json

@@ -1,4 +1,4 @@
-// TypeScript config that extends the demo-app tsconfig file. This config compiles the 
+// TypeScript config that extends the demo-app tsconfig file. This config compiles the
 // "main-aot.ts" file and also enables templage code generation / AOT. All paths need
 // to be relative to the output directory.
 {
@@ -7,6 +7,7 @@
     "experimentalDecorators": true,
     // TODO(paul): Remove once Angular has been upgraded and supports noUnusedParameters in AOT.
     "noUnusedParameters": false,
+    "strictNullChecks": true,
     "outDir": ".",
     "paths": {
       "@angular/material": ["./material"],

src/demo-app/tsconfig-build.json

@@ -6,6 +6,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "noUnusedParameters": true,
+    "strictNullChecks": true,
     "lib": ["es6", "es2015", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",