style(aio): enforce strict TypeScript checks (angular#21342)

Closes angular#20646

PR Close angular#21342

Author: petebacondarwin

aio/content/examples/service-worker-getting-started/package.json

@@ -18,7 +18,6 @@
     "@angular/core": "^5.0.0",
     "@angular/forms": "^5.0.0",
     "@angular/http": "^5.0.0",
-    "@angular/service-worker": "^5.0.0",
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",

aio/e2e/api.po.ts

@@ -25,7 +25,7 @@ export class ApiPage extends SitePage {
     // and we want to be able to pull out the code elements from only the first level
     // if `onlyDirect` is set to `true`.
     const selector = `.descendants.${docType} ${onlyDirect ? '>' : ''} li > :not(ul) code`;
-    return element.all(by.css(selector)).map<string>(item => item.getText());
+    return element.all(by.css(selector)).map<string>(item => item && item.getText());
   }
 
   getOverview(docType) {

aio/e2e/app.po.ts

@@ -62,6 +62,6 @@ export class SitePage {
   getSearchResults() {
     const results = element.all(by.css('.search-results li'));
     browser.wait(ExpectedConditions.presenceOf(results.first()), 8000);
-    return results.map(link => link.getText());
+    return results.map(link => link && link.getText());
   }
 }

aio/src/app/app.component.spec.ts

@@ -314,7 +314,7 @@ describe('AppComponent', () => {
       it('should not navigate when change to a version without a url', () => {
         setupSelectorForTesting();
         const versionWithoutUrlIndex = component.docVersions.length;
-        const versionWithoutUrl = component.docVersions[versionWithoutUrlIndex] = { title: 'foo', url: null };
+        const versionWithoutUrl = component.docVersions[versionWithoutUrlIndex] = { title: 'foo' };
         selectElement.triggerEventHandler('change', { option: versionWithoutUrl, index: versionWithoutUrlIndex });
         expect(locationService.go).not.toHaveBeenCalled();
       });
@@ -520,9 +520,9 @@ describe('AppComponent', () => {
 
     describe('aio-toc', () => {
       let tocDebugElement: DebugElement;
-      let tocContainer: DebugElement;
+      let tocContainer: DebugElement|null;
 
-      const setHasFloatingToc = hasFloatingToc => {
+      const setHasFloatingToc = (hasFloatingToc: boolean) => {
         component.hasFloatingToc = hasFloatingToc;
         fixture.detectChanges();
 
@@ -551,12 +551,12 @@ describe('AppComponent', () => {
       });
 
       it('should update the TOC container\'s `maxHeight` based on `tocMaxHeight`', () => {
-        expect(tocContainer.styles['max-height']).toBeNull();
+        expect(tocContainer!.styles['max-height']).toBeNull();
 
         component.tocMaxHeight = '100';
         fixture.detectChanges();
 
-        expect(tocContainer.styles['max-height']).toBe('100px');
+        expect(tocContainer!.styles['max-height']).toBe('100px');
       });
 
       it('should restrain scrolling inside the ToC container', () => {
@@ -565,7 +565,7 @@ describe('AppComponent', () => {
 
         expect(restrainScrolling).not.toHaveBeenCalled();
 
-        tocContainer.triggerEventHandler('mousewheel', evt);
+        tocContainer!.triggerEventHandler('mousewheel', evt);
         expect(restrainScrolling).toHaveBeenCalledWith(evt);
       });
     });
@@ -591,7 +591,7 @@ describe('AppComponent', () => {
         initializeTest();
         fixture.detectChanges();
         const banner: HTMLElement = fixture.debugElement.query(By.css('aio-mode-banner')).nativeElement;
-        expect(banner.textContent.trim()).toEqual('');
+        expect(banner.textContent!.trim()).toEqual('');
       });
     });
 
@@ -985,9 +985,9 @@ describe('AppComponent', () => {
         checkHostClass('mode', 'archive');
       });
 
-      function checkHostClass(type, value) {
+      function checkHostClass(type: string, value: string) {
         const host = fixture.debugElement;
-        const classes = host.properties['className'];
+        const classes: string = host.properties['className'];
         const classArray = classes.split(' ').filter(c => c.indexOf(`${type}-`) === 0);
         expect(classArray.length).toBeLessThanOrEqual(1, `"${classes}" should have only one class matching ${type}-*`);
         expect(classArray).toEqual([`${type}-${value}`], `"${classes}" should contain ${type}-${value}`);
@@ -1212,10 +1212,10 @@ class TestHttpClient {
     if (/navigation\.json/.test(url)) {
       data = this.navJson;
     } else {
-      const match = /generated\/docs\/(.+)\.json/.exec(url);
-      const id = match[1];
+      const match = /generated\/docs\/(.+)\.json/.exec(url)!;
+      const id = match[1]!;
       // Make up a title for test purposes
-      const title = id.split('/').pop().replace(/^([a-z])/, (_, letter) => letter.toUpperCase());
+      const title = id.split('/').pop()!.replace(/^([a-z])/, (_, letter) => letter.toUpperCase());
       const h1 = (id === 'no-title') ? '' : `<h1>${title}</h1>`;
       const contents = `${h1}<h2 id="#somewhere">Some heading</h2>`;
       data = { id, contents };

aio/src/app/app.component.ts

@@ -152,19 +152,19 @@ export class AppComponent implements OnInit {
       this.navigationService.navigationViews.map(views => views['docVersions']))
       .subscribe(([versionInfo, versions]) => {
         // TODO(pbd): consider whether we can lookup the stable and next versions from the internet
-        const computedVersions = [
+        const computedVersions: NavigationNode[] = [
           { title: 'next', url: 'https://next.angular.io' },
           { title: 'stable', url: 'https://angular.io' },
         ];
         if (this.deployment.mode === 'archive') {
-          computedVersions.push({ title: `v${versionInfo.major}`, url: null });
+          computedVersions.push({ title: `v${versionInfo.major}` });
         }
         this.docVersions = [...computedVersions, ...versions];
 
         // Find the current version - eithers title matches the current deployment mode
         // or its title matches the major version of the current version info
         this.currentDocVersion = this.docVersions.find(version =>
-          version.title === this.deployment.mode || version.title === `v${versionInfo.major}`);
+          version.title === this.deployment.mode || version.title === `v${versionInfo.major}`)!;
         this.currentDocVersion.title += ` (v${versionInfo.raw})`;
       });
 
@@ -232,7 +232,7 @@ export class AppComponent implements OnInit {
   }
 
   @HostListener('window:resize', ['$event.target.innerWidth'])
-  onResize(width) {
+  onResize(width: number) {
     this.isSideBySide = width > this.sideBySideWidth;
     this.showFloatingToc.next(width > this.showFloatingTocWidth);
   }
@@ -252,7 +252,7 @@ export class AppComponent implements OnInit {
     }
 
     // Deal with anchor clicks; climb DOM tree until anchor found (or null)
-    let target = eventTarget;
+    let target: HTMLElement|null = eventTarget;
     while (target && !(target instanceof HTMLAnchorElement)) {
       target = target.parentElement;
     }
@@ -335,8 +335,8 @@ export class AppComponent implements OnInit {
       // Must wait until now for mat-toolbar to be measurable.
       const el = this.hostElement.nativeElement as Element;
       this.tocMaxHeightOffset =
-          el.querySelector('footer').clientHeight +
-          el.querySelector('.app-toolbar').clientHeight +
+          el.querySelector('footer')!.clientHeight +
+          el.querySelector('.app-toolbar')!.clientHeight +
           24; //  fudge margin
     }
 
@@ -375,7 +375,7 @@ export class AppComponent implements OnInit {
     }
   }
 
-  doSearch(query) {
+  doSearch(query: string) {
     this.searchResults = this.searchService.search(query);
     this.showSearchResults = !!query;
   }

aio/src/app/app.module.spec.ts

@@ -23,7 +23,7 @@ describe('AppModule', () => {
   });
 
   it('should provide a list of eagerly-loaded embedded components', () => {
-    const eagerSelector = Object.keys(componentsMap).find(selector => Array.isArray(componentsMap[selector]));
+    const eagerSelector = Object.keys(componentsMap).find(selector => Array.isArray(componentsMap[selector]))!;
     const selectorCount = eagerSelector.split(',').length;
 
     expect(eagerSelector).not.toBeNull();
@@ -34,7 +34,7 @@ describe('AppModule', () => {
   });
 
   it('should provide a list of lazy-loaded embedded components', () => {
-    const lazySelector = Object.keys(componentsMap).find(selector => selector.includes('code-example'));
+    const lazySelector = Object.keys(componentsMap).find(selector => selector.includes('code-example'))!;
     const selectorCount = lazySelector.split(',').length;
 
     expect(lazySelector).not.toBeNull();

aio/src/app/documents/document-contents.ts

@@ -2,5 +2,5 @@ export interface DocumentContents {
   /** The unique identifier for this document */
   id: string;
   /** The HTML to display in the doc viewer */
-  contents: string;
+  contents: string|null;
 }

aio/src/app/documents/document.service.spec.ts

@@ -50,7 +50,7 @@ describe('DocumentService', () => {
     });
 
     it('should emit a document each time the location changes', () => {
-      let latestDocument: DocumentContents;
+      let latestDocument: DocumentContents|undefined;
       const doc0 = { contents: 'doc 0', id: 'initial/doc' };
       const doc1 = { contents: 'doc 1', id: 'new/doc' };
       const { docService, locationService } = getServices('initial/doc');
@@ -67,7 +67,7 @@ describe('DocumentService', () => {
     });
 
     it('should emit the not-found document if the document is not found on the server', () => {
-      let currentDocument: DocumentContents;
+      let currentDocument: DocumentContents|undefined;
       const notFoundDoc = { id: FILE_NOT_FOUND_ID, contents: '<h1>Page Not Found</h1>' };
       const { docService } = getServices('missing/doc');
       docService.currentDocument.subscribe(doc => currentDocument = doc);
@@ -82,7 +82,7 @@ describe('DocumentService', () => {
     });
 
     it('should emit a hard-coded not-found document if the not-found document is not found on the server', () => {
-      let currentDocument: DocumentContents;
+      let currentDocument: DocumentContents|undefined;
       const hardCodedNotFoundDoc = { contents: 'Document not found', id: FILE_NOT_FOUND_ID };
       const nextDoc = { contents: 'Next Doc', id: 'new/doc' };
       const { docService, locationService } = getServices(FILE_NOT_FOUND_ID);
@@ -99,15 +99,15 @@ describe('DocumentService', () => {
     });
 
     it('should use a hard-coded error doc if the request fails (but not cache it)', () => {
-      let latestDocument: DocumentContents;
+      let latestDocument: DocumentContents|undefined;
       const doc1 = { contents: 'doc 1' };
       const doc2 = { contents: 'doc 2' };
       const { docService, locationService } = getServices('initial/doc');
 
       docService.currentDocument.subscribe(doc => latestDocument = doc);
 
       httpMock.expectOne({}).flush(null, {status: 500, statusText: 'Server Error'});
-      expect(latestDocument.id).toEqual(FETCHING_ERROR_ID);
+      expect(latestDocument!.id).toEqual(FETCHING_ERROR_ID);
 
       locationService.go('new/doc');
       httpMock.expectOne({}).flush(doc1);
@@ -119,22 +119,22 @@ describe('DocumentService', () => {
     });
 
     it('should not crash the app if the response is invalid JSON', () => {
-      let latestDocument: DocumentContents;
+      let latestDocument: DocumentContents|undefined;
       const doc1 = { contents: 'doc 1' };
       const { docService, locationService } = getServices('initial/doc');
 
       docService.currentDocument.subscribe(doc => latestDocument = doc);
 
       httpMock.expectOne({}).flush('this is invalid JSON');
-      expect(latestDocument.id).toEqual(FETCHING_ERROR_ID);
+      expect(latestDocument!.id).toEqual(FETCHING_ERROR_ID);
 
       locationService.go('new/doc');
       httpMock.expectOne({}).flush(doc1);
       expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
     });
 
     it('should not make a request to the server if the doc is in the cache already', () => {
-      let latestDocument: DocumentContents;
+      let latestDocument: DocumentContents|undefined;
       let subscription: Subscription;
 
       const doc0 = { contents: 'doc 0' };

aio/src/app/documents/document.service.ts

@@ -52,7 +52,7 @@ export class DocumentService {
     if ( !this.cache.has(id)) {
       this.cache.set(id, this.fetchDocument(id));
     }
-    return this.cache.get(id);
+    return this.cache.get(id)!;
   }
 
   private fetchDocument(id: string): Observable<DocumentContents> {

aio/src/app/embed-components/embed-components.service.spec.ts

@@ -127,9 +127,9 @@ describe('EmbedComponentsService', () => {
       const componentRefs = service.createComponents(host);
       componentRefs[0].changeDetectorRef.detectChanges();
 
-      const barEl = host.querySelector('aio-eager-bar');
+      const barEl = host.querySelector('aio-eager-bar')!;
 
-      expect(barEl['aioEagerBarContent']).toBe(projectedContent);
+      expect((barEl as any)['aioEagerBarContent']).toBe(projectedContent);
       expect(barEl.innerHTML).toContain(projectedContent);
     });