docs: make the better type of TS (#4246)

* docs: make the better type of ts * docs: fix demo filename * docs: update cascader demos
NG-ZORRO · Oct 14, 2019 · f3a74f7 · f3a74f7
1 parent 812e1c5
commit f3a74f7
Show file tree

Hide file tree

Showing 77 changed files with 400 additions and 212 deletions.
diff --git a/components/affix/demo/on-change.ts b/components/affix/demo/on-change.ts
@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
   `
 })
 export class NzDemoAffixOnChangeComponent {
-  onChange(status: boolean) {
+  onChange(status: boolean): void {
     console.log(status);
   }
 }
diff --git a/components/auto-complete/demo/certain-category.ts b/components/auto-complete/demo/certain-category.ts
@@ -1,5 +1,11 @@
 import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
 
+export interface AutocompleteOptionGroups {
+  title: string;
+  count?: number;
+  children?: AutocompleteOptionGroups[];
+}
+
 @Component({
   selector: 'nz-demo-auto-complete-certain-category',
   encapsulation: ViewEncapsulation.None,
@@ -50,9 +56,9 @@ import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@
 })
 export class NzDemoAutoCompleteCertainCategoryComponent implements OnInit {
   inputValue: string;
-  optionGroups: any[];
+  optionGroups: AutocompleteOptionGroups[];
 
-  onChange(value: any): void {
+  onChange(value: string): void {
     console.log(value);
   }
 

diff --git a/components/avatar/demo/dynamic.ts b/components/avatar/demo/dynamic.ts
@@ -24,7 +24,9 @@ export class NzDemoAvatarDynamicComponent {
   change(): void {
     let idx = userList.indexOf(this.text);
     ++idx;
-    if (idx === userList.length) idx = 0;
+    if (idx === userList.length) {
+      idx = 0;
+    }
     this.text = userList[idx];
     this.color = colorList[idx];
   }

diff --git a/components/cascader/demo/change-on-function.ts b/components/cascader/demo/change-on-function.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const options = [
   {
@@ -69,15 +69,15 @@ const options = [
   ]
 })
 export class NzDemoCascaderChangeOnFunctionComponent {
-  nzOptions = options;
-  values: any[] | null = null;
+  nzOptions: NzCascaderOption[] = options;
+  values: string[] | null = null;
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 
-  validate(option: any, _index: number): boolean {
-    const value = option.value;
+  validate(option: NzCascaderOption, _index: number): boolean {
+    const value = option.value as string;
     return ['hangzhou', 'xihu', 'nanjing', 'zhonghuamen'].indexOf(value) >= 0;
   }
 }
diff --git a/components/cascader/demo/change-on-select.ts b/components/cascader/demo/change-on-select.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const options = [
   {
@@ -58,10 +58,10 @@ const options = [
   ]
 })
 export class NzDemoCascaderChangeOnSelectComponent {
-  nzOptions = options;
-  values: any[] | null = null;
+  nzOptions: NzCascaderOption[] = options;
+  values: string[] | null = null;
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 }
diff --git a/components/cascader/demo/custom-field-names.ts b/components/cascader/demo/custom-field-names.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const options = [
   {
@@ -72,15 +72,15 @@ const options = [
   ]
 })
 export class NzDemoCascaderCustomFieldNamesComponent {
-  nzOptions = options;
-  values: any[] | null = null;
+  nzOptions: NzCascaderOption[] = options;
+  values: string[] | null = null;
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 
-  validate(option: any, _index: number): boolean {
-    const value = option.value;
+  validate(option: NzCascaderOption, _index: number): boolean {
+    const value = option.value as string;
     return ['hangzhou', 'xihu', 'nanjing', 'zhonghuamen'].indexOf(value) >= 0;
   }
 }
diff --git a/components/cascader/demo/custom-render.ts b/components/cascader/demo/custom-render.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const options = [
   {
@@ -77,14 +77,14 @@ const options = [
   ]
 })
 export class NzDemoCascaderCustomRenderComponent {
-  nzOptions = options;
-  values: any[] | null = null;
+  nzOptions: NzCascaderOption[] = options;
+  values: string[] | null = null;
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 
-  handleAreaClick(e: Event, label: string, option: any): void {
+  handleAreaClick(e: Event, label: string, option: NzCascaderOption): void {
     e.preventDefault();
     e.stopPropagation();
     console.log('clicked "', label, '"', option);

diff --git a/components/cascader/demo/default-value-and-asyn-options.ts b/components/cascader/demo/default-value-and-asyn-options.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component, OnInit } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const options = [
   {
@@ -57,10 +57,10 @@ const options = [
   ]
 })
 export class NzDemoCascaderDefaultValueAndAsynOptionsComponent implements OnInit {
-  nzOptions: any[] | null = null;
-  values: any[] = ['zhejiang', 'hangzhou', 'xihu'];
+  nzOptions: NzCascaderOption[] | null = null;
+  values: string[] = ['zhejiang', 'hangzhou', 'xihu'];
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 

diff --git a/components/cascader/demo/default-value-and-lazyload.ts b/components/cascader/demo/default-value-and-lazyload.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const provinces = [
   {
@@ -63,14 +63,14 @@ const scenicspots: { [key: string]: Array<{ value: string; label: string; isLeaf
   ]
 })
 export class NzDemoCascaderDefaultValueAndLazyloadComponent {
-  values: any[] = ['zhejiang', 'hangzhou', 'xihu'];
+  values: string[] = ['zhejiang', 'hangzhou', 'xihu'];
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 
   /** load data async execute by `nzLoadData` method */
-  loadData(node: any, index: number): PromiseLike<any> {
+  loadData(node: NzCascaderOption, index: number): PromiseLike<void> {
     return new Promise(resolve => {
       setTimeout(() => {
         if (index < 0) {

diff --git a/components/cascader/demo/default-value.ts b/components/cascader/demo/default-value.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const options = [
   {
@@ -57,9 +57,9 @@ const options = [
   ]
 })
 export class NzDemoCascaderDefaultValueComponent {
-  nzOptions = options;
+  nzOptions: NzCascaderOption[] = options;
 
-  values: any[] = ['zhejiang', 'hangzhou', 'xihu'];
+  values: string[] = ['zhejiang', 'hangzhou', 'xihu'];
   /* // or like this:
   values: any[] = [{
     value: 'zhejiang',
@@ -72,7 +72,7 @@ export class NzDemoCascaderDefaultValueComponent {
     label: 'West Lake'
   }]; */
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 }
diff --git a/components/cascader/demo/disabled.ts b/components/cascader/demo/disabled.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const options = [
   {
@@ -58,10 +58,10 @@ const options = [
   ]
 })
 export class NzDemoCascaderDisabledComponent {
-  nzOptions = options;
-  values: any[] | null = null;
+  nzOptions: NzCascaderOption[] = options;
+  values: string[] | null = null;
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 }
diff --git a/components/cascader/demo/hover.ts b/components/cascader/demo/hover.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const options = [
   {
@@ -63,10 +63,10 @@ const options = [
   ]
 })
 export class NzDemoCascaderHoverComponent {
-  nzOptions = options;
-  values: any[] | null = null;
+  nzOptions: NzCascaderOption[] = options;
+  values: string[] | null = null;
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 }
diff --git a/components/cascader/demo/lazy.ts b/components/cascader/demo/lazy.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const provinces = [
   {
@@ -63,14 +63,14 @@ const scenicspots: { [key: string]: Array<{ value: string; label: string; isLeaf
   ]
 })
 export class NzDemoCascaderLazyComponent {
-  values: any[] | null = null;
+  values: string[] | null = null;
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values);
   }
 
   /** load data async execute by `nzLoadData` method */
-  loadData(node: any, index: number): PromiseLike<any> {
+  loadData(node: NzCascaderOption, index: number): PromiseLike<void> {
     return new Promise(resolve => {
       setTimeout(() => {
         if (index < 0) {

diff --git a/components/cascader/demo/modal.ts b/components/cascader/demo/modal.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const options = [
   {
@@ -66,11 +66,11 @@ const options = [
   ]
 })
 export class NzDemoCascaderModalComponent {
-  nzOptions = options;
-  values: any[] | null = null;
+  nzOptions: NzCascaderOption[] = options;
+  values: string[] | null = null;
   isVisible = false;
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 

diff --git a/components/cascader/demo/reactive-form.ts b/components/cascader/demo/reactive-form.ts
@@ -1,6 +1,7 @@
-// tslint:disable:no-any
-import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Component, OnDestroy } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
+import { Subscription } from 'rxjs';
 
 const options = [
   {
@@ -48,7 +49,7 @@ const options = [
   selector: 'nz-demo-cascader-reactive-form',
   template: `
     <form [formGroup]="form" novalidate>
-      <nz-cascader [nzOptions]="nzOptions" (nzChange)="onChanges($event)" [formControlName]="'name'"> </nz-cascader>
+      <nz-cascader [nzOptions]="nzOptions" [formControlName]="'name'"> </nz-cascader>
     </form>
     <br />
     <button nz-button (click)="reset()">Reset</button>
@@ -66,12 +67,16 @@ const options = [
     `
   ]
 })
-export class NzDemoCascaderReactiveFormComponent {
+export class NzDemoCascaderReactiveFormComponent implements OnDestroy {
   form: FormGroup;
-  nzOptions = options;
-
+  nzOptions: NzCascaderOption[] = options;
+  changeSubscription: Subscription;
   constructor(private fb: FormBuilder) {
     this.createForm();
+    const control = this.form.get('name') as FormControl;
+    this.changeSubscription = control.valueChanges.subscribe(data => {
+      this.onChanges(data);
+    });
   }
 
   private createForm(): void {
@@ -89,7 +94,11 @@ export class NzDemoCascaderReactiveFormComponent {
     console.log(this.form.value);
   }
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values);
   }
+
+  ngOnDestroy(): void {
+    this.changeSubscription.unsubscribe();
+  }
 }
diff --git a/components/cascader/demo/search.ts b/components/cascader/demo/search.ts
@@ -1,5 +1,5 @@
-// tslint:disable:no-any
 import { Component, OnInit } from '@angular/core';
+import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 
 const options = [
   {
@@ -105,8 +105,8 @@ const otherOptions = [
   ]
 })
 export class NzDemoCascaderSearchComponent implements OnInit {
-  nzOptions: any = null;
-  values: any[] | null = null;
+  nzOptions: NzCascaderOption[] | null = null;
+  values: string[] | null = null;
 
   ngOnInit(): void {
     setTimeout(() => {
@@ -122,7 +122,7 @@ export class NzDemoCascaderSearchComponent implements OnInit {
     }
   }
 
-  onChanges(values: any): void {
+  onChanges(values: string[]): void {
     console.log(values, this.values);
   }
 }