chore: enable sticter typescript usage

package.json

@@ -45,8 +45,8 @@
     "rxjs": "^6.0.0"
   },
   "devDependencies": {
-    "@1stg/app-config": "^0.5.1",
-    "@1stg/lib-config": "^0.5.1",
+    "@1stg/app-config": "^0.5.3",
+    "@1stg/lib-config": "^0.5.3",
     "@1stg/tslint-config": "^0.8.3",
     "@angular-devkit/build-angular": "^0.901.1",
     "@angular-devkit/core": "^9.1.1",
@@ -120,6 +120,7 @@
     ],
     "rules": {
       "@typescript-eslint/no-misused-promises": 0,
+      "accessor-pairs": 0,
       "prefer-promise-reject-errors": 0
     }
   },

src/accordion/accordion-item/accordion-item.component.ts

@@ -68,7 +68,7 @@ export class AccordionItemComponent extends CdkAccordionItem
       this.opened
         .pipe(
           startWith(null as void),
-          filter(() => this.expanded),
+          filter(() => !!this.expanded),
           take(1),
         )
         .subscribe(() => {

src/accordion/accordion.component.spec.ts

@@ -20,7 +20,7 @@ describe('AccordionComponent', () => {
     fixture.detectChanges();
     const accordionItemHeaderEl = fixture.debugElement.query(
       By.css('.aui-accordion-item__header-toggle'),
-    ).nativeElement;
+    ).nativeElement as HTMLElement;
     expect(accordionItemHeaderEl).not.toBeNull();
     expect(
       accordionItemHeaderEl.querySelector('use').getAttribute('xlink:href'),
@@ -31,13 +31,13 @@ describe('AccordionComponent', () => {
     fixture.detectChanges();
     const accordionItemHeaderEl = fixture.debugElement.query(
       By.css('.aui-accordion-item__header'),
-    ).nativeElement;
+    ).nativeElement as HTMLElement;
     accordionItemHeaderEl.dispatchEvent(new Event('click'));
 
     fixture.detectChanges();
     const accordionContentBodyEl = fixture.debugElement.query(
       By.css('.aui-accordion-item__content-body'),
-    ).nativeElement;
+    ).nativeElement as HTMLElement;
     expect(accordionContentBodyEl.hidden).toBeFalsy();
   });
 });

src/autocomplete/autocomplete.component.ts

@@ -74,7 +74,9 @@ export class AutocompleteComponent implements AfterContentInit {
       this.hasVisibleSuggestion$,
       this.placeholder.changes.pipe(
         startWith(this.placeholder),
-        map(list => !!list.length),
+        map(
+          (list: QueryList<AutocompletePlaceholderComponent>) => !!list.length,
+        ),
       ),
     ]).pipe(
       map(

src/checkbox/checkbox-group/checkbox-group.component.ts

@@ -27,7 +27,7 @@ import { CheckboxComponent } from '../checkbox.component';
     },
   ],
 })
-export class CheckboxGroupComponent extends CommonFormControl<any[]> {
+export class CheckboxGroupComponent extends CommonFormControl<unknown[]> {
   private _trackFn: TrackFn;
 
   @Input()

src/checkbox/checkbox.component.spec.ts

@@ -35,49 +35,45 @@ describe('CheckboxComponent', () => {
 
   it('should render correct with click event', () => {
     // not-checked => checked
-    fixture.debugElement
-      .query(By.css('#checkbox2 input'))
-      .nativeElement.dispatchEvent(new Event('click'));
+    (fixture.debugElement.query(By.css('#checkbox2 input'))
+      .nativeElement as HTMLElement).dispatchEvent(new Event('click'));
     fixture.detectChanges();
     expect(
-      fixture.debugElement.query(By.css('#checkbox2 .aui-checkbox'))
-        .nativeElement.className,
+      (fixture.debugElement.query(By.css('#checkbox2 .aui-checkbox'))
+        .nativeElement as HTMLElement).className,
     ).toContain('isChecked');
 
     // checked => not-checked
-    fixture.debugElement
-      .query(By.css('#checkbox1 input'))
-      .nativeElement.dispatchEvent(new Event('click'));
+    (fixture.debugElement.query(By.css('#checkbox1 input'))
+      .nativeElement as HTMLElement).dispatchEvent(new Event('click'));
     fixture.detectChanges();
     expect(
-      fixture.debugElement.query(By.css('#checkbox1 .aui-checkbox'))
-        .nativeElement.className,
+      (fixture.debugElement.query(By.css('#checkbox1 .aui-checkbox'))
+        .nativeElement as HTMLElement).className,
     ).not.toContain('isChecked');
 
     // disabled: checked => checked
-    fixture.debugElement
-      .query(By.css('#checkbox3 input'))
-      .nativeElement.dispatchEvent(new Event('click'));
+    (fixture.debugElement.query(By.css('#checkbox3 input'))
+      .nativeElement as HTMLElement).dispatchEvent(new Event('click'));
     fixture.detectChanges();
     expect(
-      fixture.debugElement.query(By.css('#checkbox3 .aui-checkbox'))
-        .nativeElement.className,
+      (fixture.debugElement.query(By.css('#checkbox3 .aui-checkbox'))
+        .nativeElement as HTMLElement).className,
     ).toContain('isChecked');
   });
 
   it('should render correct with ngModel', fakeAsync(() => {
-    fixture.debugElement
-      .query(By.css('#checkbox4 input'))
-      .nativeElement.dispatchEvent(new Event('click'));
+    (fixture.debugElement.query(By.css('#checkbox4 input'))
+      .nativeElement as HTMLElement).dispatchEvent(new Event('click'));
     fixture.detectChanges();
     expect(ins.checkedMap.d).toBe(false);
     ins.checkedMap.d = true;
     fixture.detectChanges();
     tick();
     fixture.detectChanges();
     expect(
-      fixture.debugElement.query(By.css('#checkbox4 .aui-checkbox'))
-        .nativeElement.className,
+      (fixture.debugElement.query(By.css('#checkbox4 .aui-checkbox'))
+        .nativeElement as HTMLElement).className,
     ).toContain('isChecked');
   }));
 });

src/checkbox/checkbox.component.ts

@@ -61,8 +61,8 @@ export class CheckboxComponent extends CommonFormControl<boolean>
   elRef: ElementRef;
 
   private readonly checkboxGroup: CheckboxGroupComponent;
-  private _label: any;
-  private readonly label$$ = new BehaviorSubject<any>(this.label);
+  private _label: unknown;
+  private readonly label$$ = new BehaviorSubject(this.label);
   private readonly destroy$$ = new Subject<void>();
 
   constructor(
@@ -80,15 +80,12 @@ export class CheckboxComponent extends CommonFormControl<boolean>
           takeUntil(this.destroy$$),
           map(([value, label]) => {
             if (this.checkboxGroup.trackFn) {
-              return (
-                value &&
-                value.some(v => {
-                  return (
-                    this.checkboxGroup.trackFn(v) ===
-                    this.checkboxGroup.trackFn(label)
-                  );
-                })
-              );
+              return value?.some(v => {
+                return (
+                  this.checkboxGroup.trackFn(v) ===
+                  this.checkboxGroup.trackFn(label)
+                );
+              });
             }
             return value?.includes(label);
           }),

src/dialog/confirm-dialog/confirm-dialog.component.ts

@@ -58,7 +58,7 @@ export class ConfirmDialogComponent {
     try {
       const result = await new Promise(this.config.beforeConfirm);
       this.dialogRef.close({ confirm: true, result });
-    } catch (err) {
+    } catch {
     } finally {
       this.waitConfirm = false;
       this.cdr.markForCheck();
@@ -73,7 +73,7 @@ export class ConfirmDialogComponent {
     try {
       const result = await new Promise(this.config.beforeCancel);
       this.dialogRef.close({ confirm: false, result });
-    } catch (err) {
+    } catch {
     } finally {
       this.waitCancel = false;
       this.cdr.markForCheck();

src/dialog/dialog.component.ts

@@ -61,7 +61,7 @@ export class DialogComponent {
       : {};
   }
 
-  constructor(private readonly elementRef: ElementRef) {}
+  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
 
   attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
     if (this.portalOutlet.hasAttached()) {

src/dialog/dialog.service.ts

@@ -51,7 +51,7 @@ export class DialogService {
 
     const overlayRef = this.createOverlay(config);
     const dialogIns = this.attachDialog(overlayRef, config);
-    const dialogRef = this.attachDialogContent(
+    const dialogRef = this.attachDialogContent<T, D, R>(
       compOrTempRef,
       dialogIns,
       overlayRef,
@@ -140,13 +140,13 @@ export class DialogService {
     return dialogRef.instance;
   }
 
-  private attachDialogContent<T>(
+  private attachDialogContent<T, D, R>(
     compOrTempRef: ComponentType<T> | TemplateRef<T>,
     dialogIns: DialogComponent,
     overlayRef: OverlayRef,
-    config: DialogConfig,
-  ): DialogRef<T> {
-    const dialogRef = new DialogRef<T>(
+    config: DialogConfig<D>,
+  ): DialogRef<T, R> {
+    const dialogRef = new DialogRef<T, R>(
       overlayRef,
       dialogIns,
       this.scrollDispatcher,
@@ -155,7 +155,7 @@ export class DialogService {
 
     if (compOrTempRef instanceof TemplateRef) {
       dialogIns.attachTemplatePortal(
-        new TemplatePortal<T>(compOrTempRef, null, {
+        new TemplatePortal(compOrTempRef, null, {
           $implicit: config.data,
         } as any),
       );

src/dialog/utils/index.ts

@@ -6,7 +6,7 @@ export function getClosestDialog(
   element: ElementRef,
   openDialogs: Array<DialogRef<any>>,
 ) {
-  let parent: HTMLElement | null = element.nativeElement.parentElement;
+  let parent = (element.nativeElement as HTMLElement).parentElement;
 
   while (parent?.tagName !== 'AUI-DIALOG') {
     parent = parent.parentElement;

src/dropdown/menu/menu-content.directive.ts

@@ -19,14 +19,18 @@ export class MenuContentDirective implements OnDestroy {
   private portal: TemplatePortal;
   private outlet: DomPortalOutlet;
 
+  private readonly doc: Document;
+
   constructor(
-    private readonly templateRef: TemplateRef<any>,
+    private readonly templateRef: TemplateRef<unknown>,
     private readonly appRef: ApplicationRef,
     private readonly viewContainerRef: ViewContainerRef,
     private readonly componentFactoryResolver: ComponentFactoryResolver,
     private readonly injector: Injector,
-    @Inject(DOCUMENT) private readonly document: any,
-  ) {}
+    @Inject(DOCUMENT) document: any,
+  ) {
+    this.doc = document;
+  }
 
   attach(context: any) {
     this.detach();
@@ -35,13 +39,13 @@ export class MenuContentDirective implements OnDestroy {
     }
     if (!this.outlet) {
       this.outlet = new DomPortalOutlet(
-        this.document.createElement('div'),
+        this.doc.createElement('div'),
         this.componentFactoryResolver,
         this.appRef,
         this.injector,
       );
     }
-    const el: HTMLElement = this.templateRef.elementRef.nativeElement;
+    const el = this.templateRef.elementRef.nativeElement as HTMLElement;
     el.parentNode.insertBefore(this.outlet.outletElement, el);
     this.portal.attach(this.outlet, context);
   }

src/inline-alert/inline-alert.component.spec.ts

@@ -26,24 +26,24 @@ describe('InlineAlertComponent', () => {
     ins.title = 'text title 1';
     fixture.detectChanges();
     expect(
-      fixture.debugElement.query(
+      (fixture.debugElement.query(
         By.css('#inline-alert .aui-inline-alert__title'),
-      ).nativeElement.textContent,
+      ).nativeElement as HTMLElement).textContent,
     ).toContain('text title 1');
 
     ins.content = 'text content 1';
     fixture.detectChanges();
     expect(
-      fixture.debugElement.query(
+      (fixture.debugElement.query(
         By.css('#inline-alert .aui-inline-alert__content'),
-      ).nativeElement.textContent,
+      ).nativeElement as HTMLElement).textContent,
     ).toContain('text content 1');
   });
 
   it('should be closed by click close button', () => {
-    fixture.debugElement
-      .query(By.css('#inline-alert .aui-inline-alert__close'))
-      .nativeElement.click();
+    (fixture.debugElement.query(
+      By.css('#inline-alert .aui-inline-alert__close'),
+    ).nativeElement as HTMLElement).click();
     fixture.detectChanges();
     expect(
       fixture.debugElement.query(By.css('#inline-alert aui-inline-alert')),
@@ -55,9 +55,9 @@ describe('InlineAlertComponent', () => {
       ins.inlineAlertRef.close.subscribe(() => {
         resolve();
       });
-      fixture.debugElement
-        .query(By.css('#inline-alert .aui-inline-alert__close'))
-        .nativeElement.click();
+      (fixture.debugElement.query(
+        By.css('#inline-alert .aui-inline-alert__close'),
+      ).nativeElement as HTMLElement).click();
       fixture.detectChanges();
     });
   });
@@ -92,8 +92,8 @@ describe('InlineAlertComponent', () => {
       fixture.componentInstance.type = type;
       fixture.detectChanges();
       expect(
-        fixture.debugElement.query(By.css('#inline-alert .aui-inline-alert'))
-          .nativeElement.className,
+        (fixture.debugElement.query(By.css('#inline-alert .aui-inline-alert'))
+          .nativeElement as HTMLElement).className,
       ).toContain(`aui-inline-alert--${type}`);
     }
   });

src/input/input.component.ts

@@ -66,7 +66,7 @@ export class InputComponent {
   disabled$ = new BehaviorSubject<boolean>(this.disabled);
 
   constructor(
-    public elementRef: ElementRef,
+    public elementRef: ElementRef<HTMLInputElement>,
     private readonly renderer: Renderer2,
   ) {
     this.renderer.addClass(this.elementRef.nativeElement, 'aui-input');

src/input/tags-input/tags-input.component.ts

@@ -56,10 +56,10 @@ export class TagsInputComponent extends CommonFormControl<string[]> {
   allowEmpty = false;
 
   @ViewChild('inputRef', { static: true })
-  inputRef: ElementRef;
+  inputRef: ElementRef<HTMLInputElement>;
 
   @ViewChild('inputValueMirror', { static: true })
-  inputValueMirror: ElementRef;
+  inputValueMirror: ElementRef<HTMLElement>;
 
   snapshot = {
     value: [] as string[],
@@ -82,9 +82,9 @@ export class TagsInputComponent extends CommonFormControl<string[]> {
     const size = this.size || ComponentSize.Medium;
     return `aui-input ${this.bem.block(size)} ${
       this.disabled ? 'isDisabled' : ''
-    } ${this.focused ? 'isFocused' : ''} ${
-      this.clearable
-    } ? 'isClearable' : ''`;
+    } ${
+      this.focused ? 'isFocused' : ''
+    } ${this.clearable.toString()} ? 'isClearable' : ''`;
   }
 
   get tagSize() {

src/message/base-message.ts

@@ -25,7 +25,7 @@ export abstract class BaseMessage<
   Component extends MessageComponent,
   Config extends MessageConfig
 > {
-  wrapperInstance: { elementRef: ElementRef };
+  wrapperInstance: { elementRef: ElementRef<HTMLElement> };
   componentRefs: Array<ComponentRef<Component>> = [];
 
   constructor(
@@ -52,7 +52,7 @@ export abstract class BaseMessage<
           : this.globalConfig.duration[type],
       ...(content
         ? { type: config as MessageType, content }
-        : (config as object)),
+        : (config as Config)),
     } as Config;
 
     this.removeNeedless(mergedConfig.id);
@@ -69,7 +69,7 @@ export abstract class BaseMessage<
   createType(type: MessageType, option: Config | string) {
     return typeof option === 'string'
       ? this.create(type, option)
-      : this.create({ ...(option as object), type } as Config);
+      : this.create({ ...option, type } as Config);
   }
 
   success(option: Config | string): ComponentRef<Component> {