chore: add optional chaining and nullish coalescing (NG-ZORRO#4946)

* chore: add optional chaining and nullish coalescing

* test: fix tests

* test: fix tests

components/core/config/config.service.ts

@@ -14,7 +14,7 @@ import { filter, mapTo } from 'rxjs/operators';
 
 import { NZ_CONFIG, NzConfig, NzConfigKey } from './config';
 
-const isDefined = function(value?: NzSafeAny): boolean {
+const isDefined = function (value?: NzSafeAny): boolean {
   return value !== undefined;
 };
 
@@ -67,7 +67,7 @@ export function WithConfig<T>(componentName: NzConfigKey, innerDefaultValue?: T)
 
     return {
       get(): T | undefined {
-        const originalValue = originalDescriptor && originalDescriptor.get ? originalDescriptor.get.bind(this)() : this[privatePropName];
+        const originalValue = originalDescriptor?.get ? originalDescriptor.get.bind(this)() : this[privatePropName];
 
         if (isDefined(originalValue)) {
           return originalValue;
@@ -79,7 +79,7 @@ export function WithConfig<T>(componentName: NzConfigKey, innerDefaultValue?: T)
         return isDefined(configValue) ? configValue : innerDefaultValue;
       },
       set(value?: T): void {
-        if (originalDescriptor && originalDescriptor.set) {
+        if (originalDescriptor?.set) {
           originalDescriptor.set.bind(this)(value);
         } else {
           this[privatePropName] = value;

components/core/time/candy-date.ts

@@ -49,7 +49,7 @@ export function sortRangeValue(rangeValue: SingleValue[]): SingleValue[] {
 export function normalizeRangeValue(value: SingleValue[]): CandyDate[] {
   const [start, end] = value || [];
   const newStart = start || new CandyDate();
-  const newEnd = end && end.isSameMonth(newStart) ? end.addMonths(1) : end || newStart.addMonths(1);
+  const newEnd = end?.isSameMonth(newStart) ? end.addMonths(1) : end || newStart.addMonths(1);
   return [newStart, newEnd];
 }
 

components/form/demo/layout.ts

@@ -53,7 +53,7 @@ export class NzDemoFormLayoutComponent implements OnInit {
   }
 
   get isHorizontal(): boolean {
-    return this.validateForm.controls.formLayout && this.validateForm.controls.formLayout.value === 'horizontal';
+    return this.validateForm.controls.formLayout?.value === 'horizontal';
   }
 
   constructor(private fb: FormBuilder) {}

components/slider/handle.component.ts

@@ -84,7 +84,7 @@ export class NzSliderHandleComponent implements OnChanges {
       }
     }
 
-    if (tooltipVisible && tooltipVisible.currentValue === 'always') {
+    if (tooltipVisible?.currentValue === 'always') {
       Promise.resolve().then(() => this.toggleTooltip(true, true));
     }
   }

components/time-picker/time-picker-panel.component.ts

@@ -289,7 +289,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
 
   buildHours(): void {
     let hourRanges = 24;
-    let disabledHours = this.nzDisabledHours && this.nzDisabledHours();
+    let disabledHours = this.nzDisabledHours?.();
     let startIndex = 0;
     if (this.nzUse12Hours) {
       hourRanges = 12;
@@ -313,7 +313,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
     this.hourRange = makeRange(hourRanges, this.nzHourStep, startIndex).map(r => {
       return {
         index: r,
-        disabled: this.nzDisabledHours && disabledHours.indexOf(r) !== -1
+        disabled: disabledHours && disabledHours.indexOf(r) !== -1
       };
     });
     if (this.nzUse12Hours && this.hourRange[this.hourRange.length - 1].index === 12) {
@@ -410,15 +410,15 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
 
   translateIndex(index: number, unit: NzTimePickerUnit): number {
     if (unit === 'hour') {
-      const disabledHours = this.nzDisabledHours && this.nzDisabledHours();
-      return this.calcIndex(disabledHours, this.hourRange.map(item => item.index).indexOf(index));
+      return this.calcIndex(this.nzDisabledHours?.(), this.hourRange.map(item => item.index).indexOf(index));
     } else if (unit === 'minute') {
-      const disabledMinutes = this.nzDisabledMinutes && this.nzDisabledMinutes(this.time.hours!);
-      return this.calcIndex(disabledMinutes, this.minuteRange.map(item => item.index).indexOf(index));
+      return this.calcIndex(this.nzDisabledMinutes?.(this.time.hours!), this.minuteRange.map(item => item.index).indexOf(index));
     } else if (unit === 'second') {
       // second
-      const disabledSeconds = this.nzDisabledSeconds && this.nzDisabledSeconds(this.time.hours!, this.time.minutes!);
-      return this.calcIndex(disabledSeconds, this.secondRange.map(item => item.index).indexOf(index));
+      return this.calcIndex(
+        this.nzDisabledSeconds?.(this.time.hours!, this.time.minutes!),
+        this.secondRange.map(item => item.index).indexOf(index)
+      );
     } else {
       // 12-hour
       return this.calcIndex([], this.use12HoursRange.map(item => item.index).indexOf(index));
@@ -442,8 +442,8 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
     });
   }
 
-  calcIndex(array: number[], index: number): number {
-    if (array && array.length && this.nzHideDisabledOptions) {
+  calcIndex(array: number[] | undefined, index: number): number {
+    if (array?.length && this.nzHideDisabledOptions) {
       return (
         index -
         array.reduce((pre, value) => {
@@ -565,11 +565,11 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
 
   ngOnChanges(changes: SimpleChanges): void {
     const { nzUse12Hours, opened, nzDefaultOpenValue } = changes;
-    if (nzUse12Hours && !nzUse12Hours.previousValue && nzUse12Hours.currentValue) {
+    if (!nzUse12Hours?.previousValue && nzUse12Hours?.currentValue) {
       this.build12Hours();
       this.enabledColumns++;
     }
-    if (opened && opened.currentValue) {
+    if (opened?.currentValue) {
       this.initPosition();
       this.selectInputRange();
     }

components/tree/demo/dynamic.ts

@@ -3,9 +3,7 @@ import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree';
 
 @Component({
   selector: 'nz-demo-tree-dynamic',
-  template: `
-    <nz-tree [nzData]="nodes" nzAsyncData (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"> </nz-tree>
-  `
+  template: ` <nz-tree [nzData]="nodes" nzAsyncData (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"> </nz-tree> `
 })
 export class NzDemoTreeDynamicComponent {
   nodes = [
@@ -19,7 +17,7 @@ export class NzDemoTreeDynamicComponent {
     // load child async
     if (event.eventName === 'expand') {
       const node = event.node;
-      if (node && node.getChildren().length === 0 && node.isExpanded) {
+      if (node?.getChildren().length === 0 && node?.isExpanded) {
         this.loadNode().then(data => {
           node.addChildren(data);
         });

components/typography/text-edit.component.ts

@@ -113,7 +113,7 @@ export class NzTextEditComponent implements OnInit, OnDestroy {
 
   focusAndSetValue(): void {
     setTimeout(() => {
-      if (this.textarea && this.textarea.nativeElement) {
+      if (this.textarea?.nativeElement) {
         this.textarea.nativeElement.focus();
         this.textarea.nativeElement.value = this.currentText;
         this.autosizeDirective.resizeToFitContent();

schematics/ng-add/setup-project/register-locale.ts

@@ -74,7 +74,7 @@ function registerLocaleData(moduleSource: ts.SourceFile, modulePath: string, loc
 
   const registerLocaleDataFun = allFun.filter(node => {
     const fun = node.getChildren();
-    return fun[ 0 ].getChildren()[ 0 ] && fun[ 0 ].getChildren()[ 0 ].getText() === 'registerLocaleData';
+    return fun[ 0 ].getChildren()[ 0 ]?.getText() === 'registerLocaleData';
   });
 
   if (registerLocaleDataFun.length === 0) {
@@ -129,7 +129,7 @@ function insertI18nTokenProvide(moduleSource: ts.SourceFile, modulePath: string,
     if (arrLiteral.elements.length === 0) {
       return addProvide;
     } else {
-      node = arrLiteral.elements.filter(e => e.getText && e.getText().includes('NZ_I18N'));
+      node = arrLiteral.elements.filter(e => e.getText?.().includes('NZ_I18N'));
       if (node.length === 0) {
         return addProvide;
       } else {

schematics/ng-add/setup-project/theming.ts

@@ -135,8 +135,7 @@ function addThemeStyleToTarget(project: WorkspaceProject, targetName: 'test' | '
  */
 function validateDefaultTargetBuilder(project: WorkspaceProject, targetName: 'build' | 'test'): boolean {
   const defaultBuilder = defaultTargetBuilders[ targetName ];
-  const targetConfig = project.architect && project.architect[ targetName ] ||
-    project.targets && project.targets[ targetName ];
+  const targetConfig = project.architect?.[ targetName ] || project.targets?.[ targetName ];
   const isDefaultBuilder = targetConfig && targetConfig.builder === defaultBuilder;
 
   if (!isDefaultBuilder && targetName === 'build') {

schematics/utils/build-component.ts

@@ -65,11 +65,7 @@ function getModuleClassnamePrefix(source: any): string {
   const className = getFirstNgModuleName(source);
   if (className) {
     const execArray = /(\w+)Module/gi.exec(className);
-    if (execArray && execArray[1]) {
-      return execArray[1];
-    } else {
-      return null;
-    }
+    return execArray?.[1] ?? null;
   } else {
     return null;
   }

schematics/utils/ng-update/elements.ts

@@ -1,7 +1,7 @@
 import { parseFragment, DefaultTreeDocument, DefaultTreeElement } from 'parse5';
 
 const hasClassName = (node: DefaultTreeElement, className: string) => {
-  return Array.isArray(node.attrs) && node.attrs.find(attr => attr.name === 'class' && attr.value.indexOf(className) !== -1)
+  return node.attrs?.find?.(attr => attr.name === 'class' && attr.value.indexOf(className) !== -1)
 };
 
 export function findElementWithTag(html: string, tagName: string): number[] {
@@ -14,7 +14,7 @@ export function findElementWithTag(html: string, tagName: string): number[] {
         visitNodes(node.childNodes);
       }
 
-      if (node.tagName && node.tagName.toLowerCase() === tagName.toLowerCase()) {
+      if (node.tagName?.toLowerCase() === tagName.toLowerCase()) {
         elements.push(node);
       }
     });
@@ -35,7 +35,7 @@ export function findElementWithClassName(html: string, className: string, tagNam
         visitNodes(node.childNodes);
       }
 
-      if (hasClassName(node, className) && node.tagName && node.tagName.toLowerCase() === tagName.toLowerCase()) {
+      if (hasClassName(node, className) && node.tagName?.toLowerCase() === tagName.toLowerCase()) {
         elements.push(node);
       }
     });

schematics/utils/package-config.ts

@@ -39,9 +39,5 @@ export function getPackageVersionFromPackageJson(tree: Tree, name: string): stri
 
   const packageJson = JSON.parse(tree.read('package.json').toString('utf8'));
 
-  if (packageJson.dependencies && packageJson.dependencies[name]) {
-    return packageJson.dependencies[name];
-  }
-
-  return null;
+  return packageJson.dependencies?.[name] ?? null;
 }