feat(animations): Update types for TypeScript nullability support

Closes angular#15870

packages/animations/browser/src/dsl/animation_timeline_instruction.ts

@@ -13,12 +13,12 @@ export interface AnimationTimelineInstruction extends AnimationEngineInstruction
   duration: number;
   delay: number;
   totalTime: number;
-  easing: string;
+  easing: string|null|undefined;
 }
 
 export function createTimelineInstruction(
     keyframes: ɵStyleData[], duration: number, delay: number,
-    easing: string): AnimationTimelineInstruction {
+    easing: string | null | undefined): AnimationTimelineInstruction {
   return {
     type: AnimationTransitionInstructionType.TimelineAnimation,
     keyframes,

packages/animations/browser/src/dsl/animation_timeline_visitor.ts

@@ -112,13 +112,13 @@ export declare type StyleAtTime = {
 
 export class AnimationTimelineContext {
   currentTimeline: TimelineBuilder;
-  currentAnimateTimings: AnimateTimings;
+  currentAnimateTimings: AnimateTimings|null;
   previousNode: AnimationMetadata = <AnimationMetadata>{};
   subContextCount = 0;
 
   constructor(
       public errors: any[], public timelines: TimelineBuilder[],
-      initialTimeline: TimelineBuilder = null) {
+      initialTimeline?: TimelineBuilder) {
     this.currentTimeline = initialTimeline || new TimelineBuilder(0);
     timelines.push(this.currentTimeline);
   }
@@ -262,7 +262,7 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
   }
 
   private _applyStyles(
-      styles: ɵStyleData, easing: string, treatAsEmptyStep: boolean,
+      styles: ɵStyleData, easing: string|null, treatAsEmptyStep: boolean,
       context: AnimationTimelineContext) {
     if (styles.hasOwnProperty('easing')) {
       easing = easing || styles['easing'] as string;
@@ -284,10 +284,10 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
     }
 
     const startTime = context.currentTimeline.duration;
-    const duration = context.currentAnimateTimings.duration;
+    const duration = context.currentAnimateTimings !.duration;
     const innerContext = context.createSubContext();
     const innerTimeline = innerContext.currentTimeline;
-    innerTimeline.easing = context.currentAnimateTimings.easing;
+    innerTimeline.easing = context.currentAnimateTimings !.easing;
 
     ast.steps.forEach((step: AnimationStyleMetadata, i: number) => {
       const normalizedStyles = normalizeStyles(step.styles);
@@ -311,21 +311,20 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
 
 export class TimelineBuilder {
   public duration: number = 0;
-  public easing: string = '';
-
+  public easing: string|null = '';
   private _previousKeyframe: ɵStyleData = {};
   private _currentKeyframe: ɵStyleData;
   private _keyframes = new Map<number, ɵStyleData>();
   private _styleSummary: {[prop: string]: StyleAtTime} = {};
   private _localTimelineStyles: ɵStyleData;
   private _backFill: ɵStyleData = {};
-  private _currentEmptyStepKeyframe: ɵStyleData = null;
+  private _currentEmptyStepKeyframe: ɵStyleData|null = null;
+  private _globalTimelineStyles: ɵStyleData;
 
-  constructor(public startTime: number, private _globalTimelineStyles: ɵStyleData = null) {
+  constructor(public startTime: number, globalTimelineStyles?: ɵStyleData) {
     this._localTimelineStyles = Object.create(this._backFill, {});
-    if (!this._globalTimelineStyles) {
-      this._globalTimelineStyles = this._localTimelineStyles;
-    }
+    this._globalTimelineStyles =
+        globalTimelineStyles ? globalTimelineStyles : this._localTimelineStyles;
     this._loadKeyframe();
   }
 
@@ -341,7 +340,7 @@ export class TimelineBuilder {
     if (this._currentKeyframe) {
       this._previousKeyframe = this._currentKeyframe;
     }
-    this._currentKeyframe = this._keyframes.get(this.duration);
+    this._currentKeyframe = this._keyframes.get(this.duration) !;
     if (!this._currentKeyframe) {
       this._currentKeyframe = Object.create(this._backFill, {});
       this._keyframes.set(this.duration, this._currentKeyframe);
@@ -360,15 +359,15 @@ export class TimelineBuilder {
 
   private _updateStyle(prop: string, value: string|number) {
     this._localTimelineStyles[prop] = value;
-    this._globalTimelineStyles[prop] = value;
+    this._globalTimelineStyles ![prop] = value;
     this._styleSummary[prop] = {time: this.currentTime, value};
   }
 
   allowOnlyTimelineStyles() { return this._currentEmptyStepKeyframe !== this._currentKeyframe; }
 
-  setStyles(styles: ɵStyleData, easing: string = null, treatAsEmptyStep: boolean = false) {
+  setStyles(styles: ɵStyleData, easing: string|null = null, treatAsEmptyStep: boolean = false) {
     if (easing) {
-      this._previousKeyframe['easing'] = easing;
+      this._previousKeyframe !['easing'] = easing;
     }
 
     if (treatAsEmptyStep) {
@@ -405,7 +404,7 @@ export class TimelineBuilder {
 
   snapshotCurrentStyles() { copyStyles(this._localTimelineStyles, false, this._currentKeyframe); }
 
-  getFinalKeyframe() { return this._keyframes.get(this.duration); }
+  getFinalKeyframe(): ɵStyleData { return this._keyframes.get(this.duration) !; }
 
   get properties() {
     const properties: string[] = [];
@@ -467,5 +466,5 @@ function getOffset(ast: AnimationStyleMetadata): number {
       offset = styles['offset'] as number;
     }
   }
-  return offset;
+  return offset !;
 }

packages/animations/browser/src/dsl/animation_transition_factory.ts

@@ -24,7 +24,7 @@ export class AnimationTransitionFactory {
     this._animationAst = normalizedAst;
   }
 
-  match(currentState: any, nextState: any): AnimationTransitionInstruction {
+  match(currentState: any, nextState: any): AnimationTransitionInstruction|undefined {
     if (!oneOrMoreTransitionsMatch(this.matchFns, currentState, nextState)) return;
 
     const backupStateStyles = this._stateStyles['*'] || {};

packages/animations/browser/src/dsl/animation_trigger.ts

@@ -64,11 +64,12 @@ export class AnimationTrigger {
         nextStateStyles, []);
   }
 
-  matchTransition(currentState: any, nextState: any): AnimationTransitionInstruction {
+  matchTransition(currentState: any, nextState: any): AnimationTransitionInstruction|null {
     for (let i = 0; i < this.transitionFactories.length; i++) {
       let result = this.transitionFactories[i].match(currentState, nextState);
       if (result) return result;
     }
+    return null;
   }
 }
 

packages/animations/browser/src/dsl/animation_validator_visitor.ts

@@ -175,13 +175,13 @@ export class AnimationValidatorVisitor implements AnimationDslVisitor {
 
     const limit = length - 1;
     const currentTime = context.currentTime;
-    const animateDuration = context.currentAnimateTimings.duration;
+    const animateDuration = context.currentAnimateTimings !.duration;
     ast.steps.forEach((step, i) => {
       const offset = generatedOffset > 0 ? (i == limit ? 1 : (generatedOffset * i)) : offsets[i];
       const durationUpToThisFrame = offset * animateDuration;
       context.currentTime =
-          currentTime + context.currentAnimateTimings.delay + durationUpToThisFrame;
-      context.currentAnimateTimings.duration = durationUpToThisFrame;
+          currentTime + context.currentAnimateTimings !.delay + durationUpToThisFrame;
+      context.currentAnimateTimings !.duration = durationUpToThisFrame;
       this.visitStyle(step, context);
     });
   }
@@ -190,6 +190,6 @@ export class AnimationValidatorVisitor implements AnimationDslVisitor {
 export class AnimationValidatorContext {
   public errors: string[] = [];
   public currentTime: number = 0;
-  public currentAnimateTimings: AnimateTimings;
+  public currentAnimateTimings: AnimateTimings|null;
   public collectedStyles: {[propName: string]: StyleTimeTuple} = {};
 }

packages/animations/browser/src/render/animation_driver.ts

@@ -28,5 +28,5 @@ export abstract class AnimationDriver {
   static NOOP: AnimationDriver = new NoopAnimationDriver();
   abstract animate(
       element: any, keyframes: {[key: string]: string | number}[], duration: number, delay: number,
-      easing: string, previousPlayers?: any[]): any;
+      easing?: string|null, previousPlayers?: any[]): any;
 }

packages/animations/browser/src/render/dom_animation_engine.ts

@@ -59,7 +59,7 @@ export class DomAnimationEngine {
     return players;
   }
 
-  registerTrigger(trigger: AnimationTriggerMetadata, name: string = null): void {
+  registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void {
     name = name || trigger.name;
     if (this._triggers[name]) {
       return;
@@ -84,7 +84,7 @@ export class DomAnimationEngine {
     if (lookupRef) {
       const possibleTriggers = Object.keys(lookupRef);
       const hasRemoval = possibleTriggers.some(triggerName => {
-        const oldValue = lookupRef[triggerName];
+        const oldValue = lookupRef ![triggerName];
         const instruction = this._triggers[triggerName].matchTransition(oldValue, VOID_STATE);
         return !!instruction;
       });
@@ -194,7 +194,7 @@ export class DomAnimationEngine {
 
     // we make a copy of the array because the actual source array is modified
     // each time a player is finished/destroyed (the forEach loop would fail otherwise)
-    return copyArray(this._activeElementAnimations.get(element));
+    return copyArray(this._activeElementAnimations.get(element) !);
   }
 
   animateTransition(element: any, instruction: AnimationTransitionInstruction): AnimationPlayer {
@@ -321,7 +321,7 @@ export class DomAnimationEngine {
 
   private _flushQueuedAnimations() {
     parentLoop: while (this._queuedTransitionAnimations.length) {
-      const {player, element, triggerName, event} = this._queuedTransitionAnimations.shift();
+      const {player, element, triggerName, event} = this._queuedTransitionAnimations.shift() !;
 
       let parent = element;
       while (parent = parent.parentNode) {
@@ -512,7 +512,7 @@ function copyAnimationEvent(e: AnimationEvent): AnimationEvent {
 }
 
 function makeAnimationEvent(
-    element: any, triggerName: string, fromState: string, toState: string, phaseName: string,
+    element: any, triggerName: string, fromState: string, toState: string, phaseName: string | null,
     totalTime: number): AnimationEvent {
   return <AnimationEvent>{element, triggerName, fromState, toState, phaseName, totalTime};
 }

packages/animations/browser/src/render/noop_animation_engine.ts

@@ -35,7 +35,7 @@ export class NoopAnimationEngine extends AnimationEngine {
   private _triggerStyles: {[triggerName: string]: {[stateName: string]: ɵStyleData}} =
       Object.create(null);
 
-  registerTrigger(trigger: AnimationTriggerMetadata, name: string = null): void {
+  registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void {
     name = name || trigger.name;
     if (this._triggerStyles[name]) {
       return;
@@ -139,7 +139,7 @@ export class NoopAnimationEngine extends AnimationEngine {
 
     // remove all the listeners after everything is complete
     Array.from(this._listeners.keys()).forEach(element => {
-      const listenersToKeep = this._listeners.get(element).filter(l => !l.doRemove);
+      const listenersToKeep = this._listeners.get(element) !.filter(l => !l.doRemove);
       if (listenersToKeep.length) {
         this._listeners.set(element, listenersToKeep);
       } else {

packages/animations/browser/src/render/web_animations/web_animations_player.ts

@@ -22,7 +22,7 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   private _finalKeyframe: {[key: string]: string | number};
   public time = 0;
 
-  public parentPlayer: AnimationPlayer = null;
+  public parentPlayer: AnimationPlayer|null = null;
   public previousStyles: {[styleName: string]: string | number};
 
   constructor(

packages/animations/browser/src/util.ts

@@ -13,7 +13,7 @@ export function parseTimeExpression(exp: string | number, errors: string[]): Ani
   const regex = /^([\.\d]+)(m?s)(?:\s+([\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i;
   let duration: number;
   let delay: number = 0;
-  let easing: string = null;
+  let easing: string|null = null;
   if (typeof exp === 'string') {
     const matches = exp.match(regex);
     if (matches === null) {

packages/animations/browser/test/dsl/animation_trigger_spec.ts

@@ -64,7 +64,7 @@ export function main() {
         const result = makeTrigger(
             'name', [transition('a => b', animate(1234)), transition('b => c', animate(5678))]);
 
-        const trans = result.matchTransition('b', 'c');
+        const trans = result.matchTransition('b', 'c') !;
         expect(trans.timelines.length).toEqual(1);
         const timeline = trans.timelines[0];
         expect(timeline.duration).toEqual(5678);
@@ -76,13 +76,13 @@ export function main() {
           transition('* => *', animate(9999))
         ]);
 
-        let trans = result.matchTransition('b', 'c');
+        let trans = result.matchTransition('b', 'c') !;
         expect(trans.timelines[0].duration).toEqual(5678);
 
-        trans = result.matchTransition('a', 'b');
+        trans = result.matchTransition('a', 'b') !;
         expect(trans.timelines[0].duration).toEqual(1234);
 
-        trans = result.matchTransition('c', 'c');
+        trans = result.matchTransition('c', 'c') !;
         expect(trans.timelines[0].duration).toEqual(9999);
       });
 
@@ -125,7 +125,7 @@ export function main() {
              transition(countAndReturn(true), animate(3333))
            ]);
 
-           const trans = result.matchTransition('a', 'b');
+           const trans = result.matchTransition('a', 'b') !;
            expect(trans.timelines[0].duration).toEqual(3333);
 
            expect(count).toEqual(3);
@@ -134,38 +134,38 @@ export function main() {
       it('should support bi-directional transition expressions', () => {
         const result = makeTrigger('name', [transition('a <=> b', animate(2222))]);
 
-        const t1 = result.matchTransition('a', 'b');
+        const t1 = result.matchTransition('a', 'b') !;
         expect(t1.timelines[0].duration).toEqual(2222);
 
-        const t2 = result.matchTransition('b', 'a');
+        const t2 = result.matchTransition('b', 'a') !;
         expect(t2.timelines[0].duration).toEqual(2222);
       });
 
       it('should support multiple transition statements in one string', () => {
         const result = makeTrigger('name', [transition('a => b, b => a, c => *', animate(1234))]);
 
-        const t1 = result.matchTransition('a', 'b');
+        const t1 = result.matchTransition('a', 'b') !;
         expect(t1.timelines[0].duration).toEqual(1234);
 
-        const t2 = result.matchTransition('b', 'a');
+        const t2 = result.matchTransition('b', 'a') !;
         expect(t2.timelines[0].duration).toEqual(1234);
 
-        const t3 = result.matchTransition('c', 'a');
+        const t3 = result.matchTransition('c', 'a') !;
         expect(t3.timelines[0].duration).toEqual(1234);
       });
 
       describe('aliases', () => {
         it('should alias the :enter transition as void => *', () => {
           const result = makeTrigger('name', [transition(':enter', animate(3333))]);
 
-          const trans = result.matchTransition('void', 'something');
+          const trans = result.matchTransition('void', 'something') !;
           expect(trans.timelines[0].duration).toEqual(3333);
         });
 
         it('should alias the :leave transition as * => void', () => {
           const result = makeTrigger('name', [transition(':leave', animate(3333))]);
 
-          const trans = result.matchTransition('something', 'void');
+          const trans = result.matchTransition('something', 'void') !;
           expect(trans.timelines[0].duration).toEqual(3333);
         });
       });