From f3a74f7f176d3c0e322f52f37d43fe5e78e21ccc Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Mon, 14 Oct 2019 10:40:35 +0800 Subject: [PATCH] docs: make the better type of TS (#4246) * docs: make the better type of ts * docs: fix demo filename * docs: update cascader demos --- components/affix/demo/on-change.ts | 2 +- .../auto-complete/demo/certain-category.ts | 10 +++++-- components/avatar/demo/dynamic.ts | 4 ++- .../cascader/demo/change-on-function.ts | 12 ++++----- components/cascader/demo/change-on-select.ts | 8 +++--- .../cascader/demo/custom-field-names.ts | 12 ++++----- components/cascader/demo/custom-render.ts | 10 +++---- .../demo/default-value-and-asyn-options.ts | 8 +++--- .../demo/default-value-and-lazyload.ts | 8 +++--- components/cascader/demo/default-value.ts | 8 +++--- components/cascader/demo/disabled.ts | 8 +++--- components/cascader/demo/hover.ts | 8 +++--- components/cascader/demo/lazy.ts | 8 +++--- components/cascader/demo/modal.ts | 8 +++--- components/cascader/demo/reactive-form.ts | 25 +++++++++++------ components/cascader/demo/search.ts | 8 +++--- components/cascader/demo/size.ts | 12 ++++----- components/cascader/demo/trigger-action.ts | 8 +++--- components/cascader/demo/trigger.ts | 10 +++---- components/checkbox/demo/check-all.ts | 4 +-- components/comment/demo/editor.ts | 1 + components/date-picker/demo/basic.ts | 4 +-- components/date-picker/demo/disabled-date.ts | 5 ++-- components/date-picker/demo/time.ts | 2 ++ components/drawer/demo/module | 14 +++++++++- components/drawer/demo/service.ts | 2 +- components/dropdown/demo/placement.ts | 3 ++- components/form/demo/advanced-search.ts | 2 +- components/form/demo/dynamic-form-item.ts | 6 +---- components/form/demo/module | 13 ++++++++- components/icon/demo/iconfont.ts | 4 +-- components/icon/demo/namespace.ts | 4 +-- components/input/demo/module | 12 ++++++++- components/list/demo/infinite-load.ts | 27 ++++++++++++++----- components/list/demo/vertical.ts | 14 +++++++--- components/page-header/demo/basic.ts | 2 +- components/resizable/demo/basic.ts | 7 ++--- components/resizable/demo/customize.ts | 7 ++--- components/resizable/demo/drawer.ts | 5 ++-- components/resizable/demo/grid.ts | 5 ++-- components/resizable/demo/layout.ts | 9 ++++--- .../resizable/demo/lock-aspect-ratio.ts | 7 ++--- components/resizable/demo/module | 11 +++++++- components/resizable/demo/preview.ts | 7 ++--- components/resizable/demo/table.ts | 3 ++- components/select/demo/scroll-load.ts | 2 -- components/select/demo/select-users.ts | 2 +- components/skeleton/demo/list.ts | 3 ++- components/slider/demo/icon-slider.ts | 2 +- components/slider/demo/mark.ts | 5 ++-- components/slider/nz-slider-definitions.ts | 2 ++ components/slider/nz-slider.component.ts | 6 ++--- ...ayAndDebounce.md => delay-and-debounce.md} | 0 ...ayAndDebounce.ts => delay-and-debounce.ts} | 2 +- components/table/demo/ajax.ts | 20 +++++++++++--- components/table/demo/dynamic-settings.ts | 25 ++++++++--------- components/table/demo/edit-cell.ts | 9 ++++++- components/table/demo/edit-row.ts | 11 ++++++-- components/table/demo/expand-children.ts | 23 ++++++++-------- components/table/demo/fixed-columns-header.ts | 8 +++++- components/table/demo/fixed-header.ts | 8 +++++- components/table/demo/grouping-columns.ts | 19 ++++++++++--- components/table/demo/module | 13 ++++++++- components/table/demo/nested-table.ts | 22 +++++++++++++-- components/table/demo/reset-filter.ts | 3 ++- components/table/demo/row-selection-custom.ts | 13 ++++++--- components/tabs/demo/slide.ts | 2 +- components/transfer/demo/advanced.ts | 7 ++--- components/transfer/demo/basic.ts | 4 +-- components/transfer/demo/can-move.ts | 2 +- components/transfer/demo/custom-item.ts | 7 ++--- components/transfer/demo/module | 10 ++++++- components/transfer/demo/search.ts | 6 ++--- components/transfer/demo/table-transfer.ts | 3 +-- components/transfer/demo/tree-transfer.ts | 6 ++--- components/tree-select/demo/async.ts | 6 ++--- components/upload/demo/drag.ts | 4 +-- 77 files changed, 400 insertions(+), 212 deletions(-) rename components/spin/demo/{delayAndDebounce.md => delay-and-debounce.md} (100%) rename components/spin/demo/{delayAndDebounce.ts => delay-and-debounce.ts} (91%) diff --git a/components/affix/demo/on-change.ts b/components/affix/demo/on-change.ts index 95d245fb965..1bceb4cdf22 100644 --- 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 index 7681a79ca90..abd8e71e5dc 100644 --- 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 index 1b065f0fe12..d4910d419cc 100644 --- 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 index 864c10a3e25..13bb1363ebe 100644 --- 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 index b1fda51c858..341d3f9f74b 100644 --- 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 index f673209d903..5f2a269e072 100644 --- 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 index 9d725c39d58..f37133faa44 100644 --- 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 index 5211df470f9..49c50b27f70 100644 --- 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 index abbc8d5bf5b..e5fe484c1d3 100644 --- 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 { + loadData(node: NzCascaderOption, index: number): PromiseLike { return new Promise(resolve => { setTimeout(() => { if (index < 0) { diff --git a/components/cascader/demo/default-value.ts b/components/cascader/demo/default-value.ts index d0bb2773c88..17470629074 100644 --- 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 index db0b191f619..3712026844f 100644 --- 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 index 995ec6551be..b86ac733102 100644 --- 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 index d71e63acba3..bf9869e8bcf 100644 --- 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 { + loadData(node: NzCascaderOption, index: number): PromiseLike { return new Promise(resolve => { setTimeout(() => { if (index < 0) { diff --git a/components/cascader/demo/modal.ts b/components/cascader/demo/modal.ts index ec001d8bb8a..f2a26f01658 100644 --- 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 index 22a0e67c0a9..5a9a7b7e58b 100644 --- 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: `
- +

@@ -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 index eeab91499c2..d742964188f 100644 --- 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); } } diff --git a/components/cascader/demo/size.ts b/components/cascader/demo/size.ts index 5915a3fd77f..c09837f9517 100644 --- a/components/cascader/demo/size.ts +++ b/components/cascader/demo/size.ts @@ -1,5 +1,5 @@ -// tslint:disable:no-any import { Component } from '@angular/core'; +import { NzCascaderOption } from 'ng-zorro-antd/cascader'; const options = [ { @@ -62,12 +62,12 @@ const options = [ ] }) export class NzDemoCascaderSizeComponent { - nzOptions = options; - value1: any[] | null = null; - value2: any[] | null = null; - value3: any[] | null = null; + nzOptions: NzCascaderOption[] = options; + value1: string[] | null = null; + value2: string[] | null = null; + value3: string[] | null = null; - onChanges(values: any): void { + onChanges(values: string[]): void { console.log(values); } } diff --git a/components/cascader/demo/trigger-action.ts b/components/cascader/demo/trigger-action.ts index 2e747d27159..a593baea7b6 100644 --- a/components/cascader/demo/trigger-action.ts +++ b/components/cascader/demo/trigger-action.ts @@ -1,5 +1,5 @@ -// tslint:disable:no-any import { Component } from '@angular/core'; +import { NzCascaderOption } from 'ng-zorro-antd/cascader'; const options = [ { @@ -64,10 +64,10 @@ const options = [ ] }) export class NzDemoCascaderTriggerActionComponent { - 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/trigger.ts b/components/cascader/demo/trigger.ts index 5fdc29f1a9e..ac23156541d 100644 --- a/components/cascader/demo/trigger.ts +++ b/components/cascader/demo/trigger.ts @@ -1,5 +1,5 @@ -// tslint:disable:no-any import { Component } from '@angular/core'; +import { NzCascaderOption } from 'ng-zorro-antd/cascader'; const options = [ { @@ -66,15 +66,15 @@ const options = [ ] }) export class NzDemoCascaderTriggerComponent { - nzOptions = options; - values: any[] | null = null; + nzOptions: NzCascaderOption[] = options; + values: string[] | null = null; text = 'Unselect'; - onChanges(values: any): void { + onChanges(values: string[]): void { console.log(values, this.values); } - onSelectionChange(selectedOptions: any[]): void { + onSelectionChange(selectedOptions: NzCascaderOption[]): void { this.text = selectedOptions.map(o => o.label).join(', '); } } diff --git a/components/checkbox/demo/check-all.ts b/components/checkbox/demo/check-all.ts index 7e6c91efbcd..9c4f4078299 100644 --- a/components/checkbox/demo/check-all.ts +++ b/components/checkbox/demo/check-all.ts @@ -46,10 +46,10 @@ export class NzDemoCheckboxCheckAllComponent { } updateSingleChecked(): void { - if (this.checkOptionsOne.every(item => item.checked === false)) { + if (this.checkOptionsOne.every(item => !item.checked)) { this.allChecked = false; this.indeterminate = false; - } else if (this.checkOptionsOne.every(item => item.checked === true)) { + } else if (this.checkOptionsOne.every(item => item.checked)) { this.allChecked = true; this.indeterminate = false; } else { diff --git a/components/comment/demo/editor.ts b/components/comment/demo/editor.ts index 90f2c3e5354..cbca20ea7f0 100644 --- a/components/comment/demo/editor.ts +++ b/components/comment/demo/editor.ts @@ -30,6 +30,7 @@ import { distanceInWords } from 'date-fns'; ` }) export class NzDemoCommentEditorComponent { + // tslint:disable-next-line:no-any data: any[] = []; submitting = false; user = { diff --git a/components/date-picker/demo/basic.ts b/components/date-picker/demo/basic.ts index 9cdb46ca3c0..9a8fcbc2d0e 100644 --- a/components/date-picker/demo/basic.ts +++ b/components/date-picker/demo/basic.ts @@ -34,8 +34,8 @@ import { en_US, zh_CN, NzI18nService } from 'ng-zorro-antd/i18n'; ] }) export class NzDemoDatePickerBasicComponent { - date = null; // new Date(); - dateRange = []; // [ new Date(), addDays(new Date(), 3) ]; + date = null; + dateRange = []; isEnglish = false; constructor(private i18n: NzI18nService) {} diff --git a/components/date-picker/demo/disabled-date.ts b/components/date-picker/demo/disabled-date.ts index e863b9bdb87..ae91375cd76 100644 --- a/components/date-picker/demo/disabled-date.ts +++ b/components/date-picker/demo/disabled-date.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; import differenceInCalendarDays from 'date-fns/difference_in_calendar_days'; import setHours from 'date-fns/set_hours'; +import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker/standard-types'; @Component({ selector: 'nz-demo-date-picker-disabled-date', @@ -53,7 +54,7 @@ export class NzDemoDatePickerDisabledDateComponent { return differenceInCalendarDays(current, this.today) > 0; }; - disabledDateTime = (): object => { + disabledDateTime: DisabledTimeFn = () => { return { nzDisabledHours: () => this.range(0, 24).splice(4, 20), nzDisabledMinutes: () => this.range(30, 60), @@ -61,7 +62,7 @@ export class NzDemoDatePickerDisabledDateComponent { }; }; - disabledRangeTime = (_value: Date[], type: 'start' | 'end'): object => { + disabledRangeTime: DisabledTimeFn = (_value, type?: DisabledTimePartial) => { if (type === 'start') { return { nzDisabledHours: () => this.range(0, 60).splice(4, 20), diff --git a/components/date-picker/demo/time.ts b/components/date-picker/demo/time.ts index 6f8b3f83b68..d1a92458b65 100644 --- a/components/date-picker/demo/time.ts +++ b/components/date-picker/demo/time.ts @@ -7,6 +7,7 @@ import { Component } from '@angular/core'; nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" nzPlaceHolder="Select Time" + ngModel (ngModelChange)="onChange($event)" (nzOnOk)="onOk($event)" > @@ -15,6 +16,7 @@ import { Component } from '@angular/core'; [nzShowTime]="{ nzFormat: 'HH:mm' }" nzFormat="yyyy-MM-dd HH:mm" [nzPlaceHolder]="['Start Time', 'End Time']" + ngModel (ngModelChange)="onChange($event)" (nzOnOk)="onOk($event)" > diff --git a/components/drawer/demo/module b/components/drawer/demo/module index 25c25b206dc..1148c6a19f2 100644 --- a/components/drawer/demo/module +++ b/components/drawer/demo/module @@ -10,4 +10,16 @@ import { NzRadioModule } from 'ng-zorro-antd/radio'; import { NzDividerModule } from 'ng-zorro-antd/divider'; import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions'; -export const moduleList = [ NzDrawerModule, NzButtonModule, NzFormModule, NzInputModule, NzDatePickerModule, NzSelectModule, NzTagModule, NzListModule, NzRadioModule, NzDividerModule, NzDescriptionsModule ]; +export const moduleList = [ + NzDrawerModule, + NzButtonModule, + NzFormModule, + NzInputModule, + NzDatePickerModule, + NzSelectModule, + NzTagModule, + NzListModule, + NzRadioModule, + NzDividerModule, + NzDescriptionsModule +]; diff --git a/components/drawer/demo/service.ts b/components/drawer/demo/service.ts index 8fa18ec8d33..503fff81ee7 100644 --- a/components/drawer/demo/service.ts +++ b/components/drawer/demo/service.ts @@ -23,7 +23,7 @@ import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer'; export class NzDemoDrawerServiceComponent { @ViewChild('drawerTemplate', { static: false }) drawerTemplate: TemplateRef<{ $implicit: { value: string }; - drawerRef: NzDrawerRef; + drawerRef: NzDrawerRef; }>; value = 'ng'; diff --git a/components/dropdown/demo/placement.ts b/components/dropdown/demo/placement.ts index 2f91b433eb2..b3d952953c8 100644 --- a/components/dropdown/demo/placement.ts +++ b/components/dropdown/demo/placement.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NzPlacementType } from 'ng-zorro-antd/dropdown'; @Component({ selector: 'nz-demo-dropdown-placement', @@ -26,5 +27,5 @@ import { Component } from '@angular/core'; ] }) export class NzDemoDropdownPlacementComponent { - listOfPosition = ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight']; + listOfPosition: NzPlacementType[] = ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight']; } diff --git a/components/form/demo/advanced-search.ts b/components/form/demo/advanced-search.ts index 8d6c2749491..58d811a658a 100644 --- a/components/form/demo/advanced-search.ts +++ b/components/form/demo/advanced-search.ts @@ -76,7 +76,7 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; }) export class NzDemoFormAdvancedSearchComponent implements OnInit { validateForm: FormGroup; - controlArray: any[] = []; + controlArray: Array<{ index: number; show: boolean }> = []; isCollapse = true; toggleCollapse(): void { diff --git a/components/form/demo/dynamic-form-item.ts b/components/form/demo/dynamic-form-item.ts index e2fb8f606e4..ed60678c23d 100644 --- a/components/form/demo/dynamic-form-item.ts +++ b/components/form/demo/dynamic-form-item.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; +import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'nz-demo-form-dynamic-form-item', @@ -103,10 +103,6 @@ export class NzDemoFormDynamicFormItemComponent implements OnInit { } } - getFormControl(name: string): AbstractControl { - return this.validateForm.controls[name]; - } - submitForm(): void { for (const i in this.validateForm.controls) { this.validateForm.controls[i].markAsDirty(); diff --git a/components/form/demo/module b/components/form/demo/module index 0a2198bb9d3..d4d96423689 100644 --- a/components/form/demo/module +++ b/components/form/demo/module @@ -9,4 +9,15 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; -export const moduleList = [ NzFormModule, NzButtonModule, NzIconModule, NzSelectModule, NzInputModule, NzRadioModule, NzDatePickerModule, NzTimePickerModule, NzInputNumberModule, NzCheckboxModule ]; +export const moduleList = [ + NzFormModule, + NzButtonModule, + NzIconModule, + NzSelectModule, + NzInputModule, + NzRadioModule, + NzDatePickerModule, + NzTimePickerModule, + NzInputNumberModule, + NzCheckboxModule +]; diff --git a/components/icon/demo/iconfont.ts b/components/icon/demo/iconfont.ts index 0389cb5d8b8..00544a2cce9 100644 --- a/components/icon/demo/iconfont.ts +++ b/components/icon/demo/iconfont.ts @@ -20,8 +20,8 @@ import { NzIconService } from 'ng-zorro-antd/icon'; ] }) export class NzDemoIconIconfontComponent { - constructor(private _iconService: NzIconService) { - this._iconService.fetchFromIconfont({ + constructor(private iconService: NzIconService) { + this.iconService.fetchFromIconfont({ scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' }); } diff --git a/components/icon/demo/namespace.ts b/components/icon/demo/namespace.ts index 75dc59030cc..006aac95148 100644 --- a/components/icon/demo/namespace.ts +++ b/components/icon/demo/namespace.ts @@ -21,7 +21,7 @@ const ngZorroIconLiteral = ] }) export class NzDemoIconNamespaceComponent { - constructor(private _iconService: NzIconService) { - this._iconService.addIconLiteral('ng-zorro:antd', ngZorroIconLiteral); + constructor(private iconService: NzIconService) { + this.iconService.addIconLiteral('ng-zorro:antd', ngZorroIconLiteral); } } diff --git a/components/input/demo/module b/components/input/demo/module index 2b88693e96e..a166256ea4a 100644 --- a/components/input/demo/module +++ b/components/input/demo/module @@ -8,4 +8,14 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { FormsModule } from '@angular/forms'; -export const moduleList = [ FormsModule, NzInputModule, NzSelectModule, NzCascaderModule, NzInputNumberModule, NzDatePickerModule, NzIconModule, NzToolTipModule, NzButtonModule ]; +export const moduleList = [ + FormsModule, + NzInputModule, + NzSelectModule, + NzCascaderModule, + NzInputNumberModule, + NzDatePickerModule, + NzIconModule, + NzToolTipModule, + NzButtonModule + ]; diff --git a/components/list/demo/infinite-load.ts b/components/list/demo/infinite-load.ts index 9d4b682410d..11ca324df25 100644 --- a/components/list/demo/infinite-load.ts +++ b/components/list/demo/infinite-load.ts @@ -1,9 +1,20 @@ -// tslint:disable:no-any import { CollectionViewer, DataSource } from '@angular/cdk/collections'; import { HttpClient } from '@angular/common/http'; import { ChangeDetectionStrategy, Component } from '@angular/core'; import { BehaviorSubject, Observable, Subscription } from 'rxjs'; +interface ItemData { + gender: string; + name: Name; + email: string; +} + +interface Name { + title: string; + first: string; + last: string; +} + @Component({ selector: 'nz-demo-list-infinite-load', template: ` @@ -48,19 +59,19 @@ export class NzDemoListInfiniteLoadComponent { constructor(private http: HttpClient) {} } -class MyDataSource extends DataSource { +class MyDataSource extends DataSource { private length = 100000; private pageSize = 10; - private cachedData = Array.from({ length: this.length }); + private cachedData = Array.from({ length: this.length }); private fetchedPages = new Set(); - private dataStream = new BehaviorSubject(this.cachedData); + private dataStream = new BehaviorSubject(this.cachedData); private subscription = new Subscription(); constructor(private http: HttpClient) { super(); } - connect(collectionViewer: CollectionViewer): Observable { + connect(collectionViewer: CollectionViewer): Observable { this.subscription.add( collectionViewer.viewChange.subscribe(range => { const startPage = this.getPageForIndex(range.start); @@ -88,8 +99,10 @@ class MyDataSource extends DataSource { this.fetchedPages.add(page); this.http - .get(`https://randomuser.me/api/?results=${this.pageSize}&inc=name,gender,email,nat&noinfo`) - .subscribe((res: any) => { + .get<{ results: ItemData[] }>( + `https://randomuser.me/api/?results=${this.pageSize}&inc=name,gender,email,nat&noinfo` + ) + .subscribe(res => { this.cachedData.splice(page * this.pageSize, this.pageSize, ...res.results); this.dataStream.next(this.cachedData); }); diff --git a/components/list/demo/vertical.ts b/components/list/demo/vertical.ts index 9e5bab1ae20..e99dde9676e 100644 --- a/components/list/demo/vertical.ts +++ b/components/list/demo/vertical.ts @@ -1,5 +1,13 @@ import { Component, OnInit } from '@angular/core'; +interface ItemData { + href: string; + title: string; + avatar: string; + description: string; + content: string; +} + @Component({ selector: 'nz-demo-list-vertical', template: ` @@ -35,8 +43,7 @@ import { Component, OnInit } from '@angular/core'; ` }) export class NzDemoListVerticalComponent implements OnInit { - // tslint:disable-next-line:no-any - data: any[] = []; + data: ItemData[] = []; ngOnInit(): void { this.loadData(1); @@ -50,7 +57,8 @@ export class NzDemoListVerticalComponent implements OnInit { avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.', content: - 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.' + 'We supply a series of design principles, practical patterns and high quality design resources ' + + '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.' }; }); } diff --git a/components/page-header/demo/basic.ts b/components/page-header/demo/basic.ts index a39b628fbff..42fcd67ca07 100644 --- a/components/page-header/demo/basic.ts +++ b/components/page-header/demo/basic.ts @@ -14,7 +14,7 @@ import { Component } from '@angular/core'; ] }) export class NzDemoPageHeaderBasicComponent { - onBack() { + onBack(): void { console.log('onBack'); } } diff --git a/components/resizable/demo/basic.ts b/components/resizable/demo/basic.ts index ec6f0df6791..311ed811e05 100644 --- a/components/resizable/demo/basic.ts +++ b/components/resizable/demo/basic.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NzResizeEvent } from 'ng-zorro-antd/resizable'; @Component({ selector: 'nz-demo-resizable-basic', @@ -39,11 +40,11 @@ export class NzDemoResizableBasicComponent { height = 200; id = -1; - onResize({ width, height }: { width: number; height: number }): void { + onResize({ width, height }: NzResizeEvent): void { cancelAnimationFrame(this.id); this.id = requestAnimationFrame(() => { - this.width = width; - this.height = height; + this.width = width!; + this.height = height!; }); } } diff --git a/components/resizable/demo/customize.ts b/components/resizable/demo/customize.ts index c47ca692f75..3ccba1fdbea 100644 --- a/components/resizable/demo/customize.ts +++ b/components/resizable/demo/customize.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NzResizeEvent } from 'ng-zorro-antd/resizable'; @Component({ selector: 'nz-demo-resizable-customize', @@ -58,11 +59,11 @@ export class NzDemoResizableCustomizeComponent { height = 200; id = -1; - onResize({ width, height }: { width: number; height: number }): void { + onResize({ width, height }: NzResizeEvent): void { cancelAnimationFrame(this.id); this.id = requestAnimationFrame(() => { - this.width = width; - this.height = height; + this.width = width!; + this.height = height!; }); } } diff --git a/components/resizable/demo/drawer.ts b/components/resizable/demo/drawer.ts index 393bc3cbfb8..19d49ba97a2 100644 --- a/components/resizable/demo/drawer.ts +++ b/components/resizable/demo/drawer.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NzResizeEvent } from 'ng-zorro-antd/resizable'; @Component({ selector: 'nz-demo-resizable-drawer', @@ -46,10 +47,10 @@ export class NzDemoResizableDrawerComponent { visible = false; id = -1; - onResize({ width }: { width: number }): void { + onResize({ width }: NzResizeEvent): void { cancelAnimationFrame(this.id); this.id = requestAnimationFrame(() => { - this.width = width; + this.width = width!; }); } diff --git a/components/resizable/demo/grid.ts b/components/resizable/demo/grid.ts index 438915c863b..d87f2d9413f 100644 --- a/components/resizable/demo/grid.ts +++ b/components/resizable/demo/grid.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NzResizeEvent } from 'ng-zorro-antd/resizable'; @Component({ selector: 'nz-demo-resizable-grid', @@ -43,10 +44,10 @@ export class NzDemoResizableGridComponent { col = 8; id = -1; - onResize({ col }: { col: number }): void { + onResize({ col }: NzResizeEvent): void { cancelAnimationFrame(this.id); this.id = requestAnimationFrame(() => { - this.col = col; + this.col = col!; }); } } diff --git a/components/resizable/demo/layout.ts b/components/resizable/demo/layout.ts index cfa3ed49a67..004e9c9ec11 100644 --- a/components/resizable/demo/layout.ts +++ b/components/resizable/demo/layout.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NzResizeEvent } from 'ng-zorro-antd/resizable'; @Component({ selector: 'nz-demo-resizable-layout', @@ -101,17 +102,17 @@ export class NzDemoResizableLayoutComponent { contentHeight = 200; id = -1; - onSideResize({ width }: { width: number }): void { + onSideResize({ width }: NzResizeEvent): void { cancelAnimationFrame(this.id); this.id = requestAnimationFrame(() => { - this.siderWidth = width; + this.siderWidth = width!; }); } - onContentResize({ height }: { height: number }): void { + onContentResize({ height }: NzResizeEvent): void { cancelAnimationFrame(this.id); this.id = requestAnimationFrame(() => { - this.contentHeight = height; + this.contentHeight = height!; }); } } diff --git a/components/resizable/demo/lock-aspect-ratio.ts b/components/resizable/demo/lock-aspect-ratio.ts index 13d551a710d..dd942cc4834 100644 --- a/components/resizable/demo/lock-aspect-ratio.ts +++ b/components/resizable/demo/lock-aspect-ratio.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NzResizeEvent } from 'ng-zorro-antd/resizable'; @Component({ selector: 'nz-demo-resizable-lock-aspect-ratio', @@ -36,11 +37,11 @@ export class NzDemoResizableLockAspectRatioComponent { height = 200; id = -1; - onResize({ width, height }: { width: number; height: number }): void { + onResize({ width, height }: NzResizeEvent): void { cancelAnimationFrame(this.id); this.id = requestAnimationFrame(() => { - this.width = width; - this.height = height; + this.width = width!; + this.height = height!; }); } } diff --git a/components/resizable/demo/module b/components/resizable/demo/module index d6f849fcca9..7480c062ac2 100644 --- a/components/resizable/demo/module +++ b/components/resizable/demo/module @@ -7,4 +7,13 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout'; import { NzTableModule } from 'ng-zorro-antd/table'; import { NzIconModule } from 'ng-zorro-antd/icon'; -export const moduleList = [ NzResizableModule, NzButtonModule, NzFormModule, NzDrawerModule, NzGridModule, NzTableModule, NzLayoutModule, NzIconModule ]; +export const moduleList = [ + NzResizableModule, + NzButtonModule, + NzFormModule, + NzDrawerModule, + NzGridModule, + NzTableModule, + NzLayoutModule, + NzIconModule +]; diff --git a/components/resizable/demo/preview.ts b/components/resizable/demo/preview.ts index 958157ac9b4..8159d6a6e3d 100644 --- a/components/resizable/demo/preview.ts +++ b/components/resizable/demo/preview.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NzResizeEvent } from 'ng-zorro-antd/resizable'; @Component({ selector: 'nz-demo-resizable-preview', @@ -35,8 +36,8 @@ export class NzDemoResizablePreviewComponent { width = 400; height = 200; - onResize({ width, height }: { width: number; height: number }): void { - this.width = width; - this.height = height; + onResize({ width, height }: NzResizeEvent): void { + this.width = width!; + this.height = height!; } } diff --git a/components/resizable/demo/table.ts b/components/resizable/demo/table.ts index 684c02fdbab..852a28f7e10 100644 --- a/components/resizable/demo/table.ts +++ b/components/resizable/demo/table.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NzResizeEvent } from 'ng-zorro-antd/resizable'; @Component({ selector: 'nz-demo-resizable-table', @@ -92,7 +93,7 @@ export class NzDemoResizableTableComponent { address: 'Sidney No. 1 Lake Park' } ]; - onResize({ width }: { width: number }, col: string): void { + onResize({ width }: NzResizeEvent, col: string): void { this.cols = this.cols.map(e => (e.title === col ? { ...e, width: `${width}px` } : e)); } } diff --git a/components/select/demo/scroll-load.ts b/components/select/demo/scroll-load.ts index 8c0002f8d74..39180994990 100644 --- a/components/select/demo/scroll-load.ts +++ b/components/select/demo/scroll-load.ts @@ -40,8 +40,6 @@ export class NzDemoSelectScrollLoadComponent implements OnInit { }) ); - // tslint:enable:no-any - loadMore(): void { this.isLoading = true; this.getRandomNameList.subscribe(data => { diff --git a/components/select/demo/select-users.ts b/components/select/demo/select-users.ts index d24555844d8..29e306b1409 100644 --- a/components/select/demo/select-users.ts +++ b/components/select/demo/select-users.ts @@ -50,7 +50,7 @@ export class NzDemoSelectSelectUsersComponent implements OnInit { constructor(private http: HttpClient) {} ngOnInit(): void { - // tslint:disable-next-line:no-any + // tslint:disable:no-any const getRandomNameList = (name: string) => this.http .get(`${this.randomUserUrl}`) diff --git a/components/skeleton/demo/list.ts b/components/skeleton/demo/list.ts index 0ab78e40ce6..e7d648e472e 100644 --- a/components/skeleton/demo/list.ts +++ b/components/skeleton/demo/list.ts @@ -38,7 +38,8 @@ export class NzDemoSkeletonListComponent { avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.', content: - 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.' + 'We supply a series of design principles, practical patterns and high quality design resources ' + + '(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.' }; }); } diff --git a/components/slider/demo/icon-slider.ts b/components/slider/demo/icon-slider.ts index 71907c48a2b..5706bb3ee3c 100644 --- a/components/slider/demo/icon-slider.ts +++ b/components/slider/demo/icon-slider.ts @@ -61,7 +61,7 @@ export class NzDemoSliderIconSliderComponent implements OnInit { this.sliderValue = 0; } - highlightIcon() { + highlightIcon(): void { const lower = this._sliderValue >= this.mid; this.preHighLight = !lower; this.nextHighLight = lower; diff --git a/components/slider/demo/mark.ts b/components/slider/demo/mark.ts index 97dfc8bf097..8f3a4f235d0 100644 --- a/components/slider/demo/mark.ts +++ b/components/slider/demo/mark.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NzMarks } from 'ng-zorro-antd/slider'; @Component({ selector: 'nz-demo-slider-mark', @@ -30,7 +31,7 @@ import { Component } from '@angular/core'; ] }) export class NzDemoSliderMarkComponent { - marks: any = { + marks: NzMarks = { 0: '0°C', 26: '26°C', 37: '37°C', @@ -42,7 +43,7 @@ export class NzDemoSliderMarkComponent { } }; - changeMarks() { + changeMarks(): void { this.marks = { 20: '20%', 99: '99%' diff --git a/components/slider/nz-slider-definitions.ts b/components/slider/nz-slider-definitions.ts index e4b0ee495df..f64a9e541ba 100644 --- a/components/slider/nz-slider-definitions.ts +++ b/components/slider/nz-slider-definitions.ts @@ -13,6 +13,8 @@ export interface MarkObj { label: string; } +export type NzMarks = Marks; + export class Marks { [key: number]: Mark; } diff --git a/components/slider/nz-slider.component.ts b/components/slider/nz-slider.component.ts index fc67c970f01..a3a2bc99bbc 100644 --- a/components/slider/nz-slider.component.ts +++ b/components/slider/nz-slider.component.ts @@ -42,7 +42,7 @@ import { import { isValueARange, ExtendedMark, - Marks, + NzMarks, SliderHandler, SliderShowTooltip, SliderValue @@ -73,7 +73,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange @Input() @InputBoolean() nzRange: boolean = false; @Input() @InputBoolean() nzVertical: boolean = false; @Input() nzDefaultValue: SliderValue | null = null; - @Input() nzMarks: Marks | null = null; + @Input() nzMarks: NzMarks | null = null; @Input() nzMax = 100; @Input() nzMin = 0; @Input() nzStep = 1; @@ -462,7 +462,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange .map(() => ({ offset: null, value: null, active: false })); } - private generateMarkItems(marks: Marks): ExtendedMark[] | null { + private generateMarkItems(marks: NzMarks): ExtendedMark[] | null { const marksArray: ExtendedMark[] = []; for (const key in marks) { const mark = marks[key]; diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delay-and-debounce.md similarity index 100% rename from components/spin/demo/delayAndDebounce.md rename to components/spin/demo/delay-and-debounce.md diff --git a/components/spin/demo/delayAndDebounce.ts b/components/spin/demo/delay-and-debounce.ts similarity index 91% rename from components/spin/demo/delayAndDebounce.ts rename to components/spin/demo/delay-and-debounce.ts index b61cdc245d8..a521275a9c8 100644 --- a/components/spin/demo/delayAndDebounce.ts +++ b/components/spin/demo/delay-and-debounce.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ - selector: 'nz-demo-spin-delayAndDebounce', + selector: 'nz-demo-spin-delay-and-debounce', template: ` { + ): Observable<{ results: ItemData[] }> { let params = new HttpParams() .append('page', `${pageIndex}`) .append('results', `${pageSize}`) @@ -21,7 +33,7 @@ export class RandomUserService { genders.forEach(gender => { params = params.append('gender', gender); }); - return this.http.get(`${this.randomUserUrl}`, { + return this.http.get<{ results: ItemData[] }>(`${this.randomUserUrl}`, { params }); } @@ -66,7 +78,7 @@ export class NzDemoTableAjaxComponent implements OnInit { pageIndex = 1; pageSize = 10; total = 1; - listOfData = []; + listOfData: ItemData[] = []; loading = true; sortValue: string | null = null; sortKey: string | null = null; @@ -88,7 +100,7 @@ export class NzDemoTableAjaxComponent implements OnInit { this.loading = true; this.randomUserService .getUsers(this.pageIndex, this.pageSize, this.sortKey!, this.sortValue!, this.searchGenderList) - .subscribe((data: any) => { + .subscribe(data => { this.loading = false; this.total = 200; this.listOfData = data.results; diff --git a/components/table/demo/dynamic-settings.ts b/components/table/demo/dynamic-settings.ts index 0a9c59cd4fd..87428cfe397 100644 --- a/components/table/demo/dynamic-settings.ts +++ b/components/table/demo/dynamic-settings.ts @@ -1,5 +1,15 @@ import { Component, OnInit } from '@angular/core'; +interface ItemData { + name: string; + age: number | string; + address: string; + checked: boolean; + expand: boolean; + description: string; + disabled?: boolean; +} + @Component({ selector: 'nz-demo-table-dynamic-settings', template: ` @@ -146,7 +156,8 @@ import { Component, OnInit } from '@angular/core'; ] }) export class NzDemoTableDynamicSettingsComponent implements OnInit { - listOfData: any[] = []; + listOfData: ItemData[] = []; + displayData: ItemData[] = []; bordered = false; loading = false; sizeChanger = false; @@ -160,21 +171,11 @@ export class NzDemoTableDynamicSettingsComponent implements OnInit { checkbox = true; allChecked = false; indeterminate = false; - displayData: any[] = []; simple = false; noResult = false; position = 'bottom'; - currentPageDataChange( - $event: Array<{ - name: string; - age: number; - address: string; - checked: boolean; - expand: boolean; - description: string; - }> - ): void { + currentPageDataChange($event: ItemData[]): void { this.displayData = $event; this.refreshStatus(); } diff --git a/components/table/demo/edit-cell.ts b/components/table/demo/edit-cell.ts index 34552a8fd1a..19f4b5811e7 100644 --- a/components/table/demo/edit-cell.ts +++ b/components/table/demo/edit-cell.ts @@ -1,6 +1,13 @@ import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'; import { NzInputDirective } from 'ng-zorro-antd/input'; +interface ItemData { + id: string; + name: string; + age: string; + address: string; +} + @Component({ selector: 'nz-demo-table-edit-cell', template: ` @@ -61,7 +68,7 @@ import { NzInputDirective } from 'ng-zorro-antd/input'; export class NzDemoTableEditCellComponent implements OnInit { i = 0; editId: string | null; - listOfData: any[] = []; + listOfData: ItemData[] = []; @ViewChild(NzInputDirective, { static: false, read: ElementRef }) inputElement: ElementRef; @HostListener('window:click', ['$event']) diff --git a/components/table/demo/edit-row.ts b/components/table/demo/edit-row.ts index 62639030963..c1e32c806e9 100644 --- a/components/table/demo/edit-row.ts +++ b/components/table/demo/edit-row.ts @@ -1,5 +1,12 @@ import { Component, OnInit } from '@angular/core'; +interface ItemData { + id: string; + name: string; + age: number; + address: string; +} + @Component({ selector: 'nz-demo-table-edit-row', template: ` @@ -62,8 +69,8 @@ import { Component, OnInit } from '@angular/core'; ] }) export class NzDemoTableEditRowComponent implements OnInit { - editCache: { [key: string]: any } = {}; - listOfData: any[] = []; + editCache: { [key: string]: { edit: boolean; data: ItemData } } = {}; + listOfData: ItemData[] = []; startEdit(id: string): void { this.editCache[id].edit = true; diff --git a/components/table/demo/expand-children.ts b/components/table/demo/expand-children.ts index c4029a69d53..ba9246660ba 100644 --- a/components/table/demo/expand-children.ts +++ b/components/table/demo/expand-children.ts @@ -3,11 +3,12 @@ import { Component, OnInit } from '@angular/core'; export interface TreeNodeInterface { key: number; name: string; - age: number; - level: number; - expand: boolean; - address: string; + age?: number; + level?: number; + expand?: boolean; + address?: string; children?: TreeNodeInterface[]; + parent?: TreeNodeInterface; } @Component({ @@ -43,7 +44,7 @@ export interface TreeNodeInterface { ` }) export class NzDemoTableExpandChildrenComponent implements OnInit { - listOfMapData = [ + listOfMapData: TreeNodeInterface[] = [ { key: 1, name: 'John Brown sr.', @@ -123,18 +124,18 @@ export class NzDemoTableExpandChildrenComponent implements OnInit { } } - convertTreeToList(root: object): TreeNodeInterface[] { - const stack: any[] = []; - const array: any[] = []; + convertTreeToList(root: TreeNodeInterface): TreeNodeInterface[] { + const stack: TreeNodeInterface[] = []; + const array: TreeNodeInterface[] = []; const hashMap = {}; stack.push({ ...root, level: 0, expand: false }); while (stack.length !== 0) { - const node = stack.pop(); + const node = stack.pop()!; this.visitNode(node, hashMap, array); if (node.children) { for (let i = node.children.length - 1; i >= 0; i--) { - stack.push({ ...node.children[i], level: node.level + 1, expand: false, parent: node }); + stack.push({ ...node.children[i], level: node.level! + 1, expand: false, parent: node }); } } } @@ -142,7 +143,7 @@ export class NzDemoTableExpandChildrenComponent implements OnInit { return array; } - visitNode(node: TreeNodeInterface, hashMap: { [key: string]: any }, array: TreeNodeInterface[]): void { + visitNode(node: TreeNodeInterface, hashMap: { [key: string]: boolean }, array: TreeNodeInterface[]): void { if (!hashMap[node.key]) { hashMap[node.key] = true; array.push(node); diff --git a/components/table/demo/fixed-columns-header.ts b/components/table/demo/fixed-columns-header.ts index 6c0fdb37608..cd0587261dc 100644 --- a/components/table/demo/fixed-columns-header.ts +++ b/components/table/demo/fixed-columns-header.ts @@ -1,5 +1,11 @@ import { Component, OnInit } from '@angular/core'; +interface ItemData { + name: string; + age: number; + address: string; +} + @Component({ selector: 'nz-demo-table-fixed-columns-header', template: ` @@ -40,7 +46,7 @@ import { Component, OnInit } from '@angular/core'; ` }) export class NzDemoTableFixedColumnsHeaderComponent implements OnInit { - listOfData: any[] = []; + listOfData: ItemData[] = []; ngOnInit(): void { for (let i = 0; i < 100; i++) { diff --git a/components/table/demo/fixed-header.ts b/components/table/demo/fixed-header.ts index a4523c0f6d0..a2dd72c2854 100644 --- a/components/table/demo/fixed-header.ts +++ b/components/table/demo/fixed-header.ts @@ -1,5 +1,11 @@ import { Component, OnInit } from '@angular/core'; +interface ItemData { + name: string; + age: number; + address: string; +} + @Component({ selector: 'nz-demo-table-fixed-header', template: ` @@ -22,7 +28,7 @@ import { Component, OnInit } from '@angular/core'; ` }) export class NzDemoTableFixedHeaderComponent implements OnInit { - listOfData: any[] = []; + listOfData: ItemData[] = []; ngOnInit(): void { for (let i = 0; i < 100; i++) { diff --git a/components/table/demo/grouping-columns.ts b/components/table/demo/grouping-columns.ts index 093cef3b729..c39951d9f4b 100644 --- a/components/table/demo/grouping-columns.ts +++ b/components/table/demo/grouping-columns.ts @@ -1,5 +1,16 @@ import { Component, OnInit } from '@angular/core'; +interface ItemData { + name: string; + age: number; + street: string; + building: string; + number: number; + companyAddress: string; + companyName: string; + gender: string; +} + @Component({ selector: 'nz-demo-table-grouping-columns', template: ` @@ -51,15 +62,15 @@ import { Component, OnInit } from '@angular/core'; export class NzDemoTableGroupingColumnsComponent implements OnInit { widthConfig = ['100px', '200px', '200px', '100px', '100px', '200px', '200px', '100px']; scrollConfig = { x: '1200px', y: '240px' }; - listOfDisplayData: any[] = []; - listOfData: any[] = []; - sortValue: string | null = null; + listOfDisplayData: ItemData[] = []; + listOfData: ItemData[] = []; + sortValue: 'ascend' | 'descend' | null = null; filterName = [{ text: 'Joe', value: 'Joe' }, { text: 'John', value: 'John' }]; searchName: string[] = []; search(searchName: string[]): void { this.searchName = searchName; - const filterFunc = (item: any) => { + const filterFunc = (item: ItemData) => { return this.searchName.length ? this.searchName.some(name => item.name.indexOf(name) !== -1) : true; }; const listOfData = this.listOfData.filter(item => filterFunc(item)); diff --git a/components/table/demo/module b/components/table/demo/module index e0b04063749..92653b78313 100644 --- a/components/table/demo/module +++ b/components/table/demo/module @@ -9,4 +9,15 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzIconModule } from 'ng-zorro-antd/icon'; -export const moduleList = [ NzTableModule, NzDividerModule, NzDropDownModule, NzSwitchModule, NzFormModule, NzRadioModule, NzBadgeModule, NzButtonModule, NzInputModule, NzIconModule ]; +export const moduleList = [ + NzTableModule, + NzDividerModule, + NzDropDownModule, + NzSwitchModule, + NzFormModule, + NzRadioModule, + NzBadgeModule, + NzButtonModule, + NzInputModule, + NzIconModule +]; diff --git a/components/table/demo/nested-table.ts b/components/table/demo/nested-table.ts index 965424665e4..607395ca603 100644 --- a/components/table/demo/nested-table.ts +++ b/components/table/demo/nested-table.ts @@ -1,5 +1,23 @@ import { Component, OnInit } from '@angular/core'; +interface ParentItemData { + key: number; + name: string; + platform: string; + version: string; + upgradeNum: number | string; + creator: string; + createdAt: string; + expand: boolean; +} + +interface ChildrenItemData { + key: number; + name: string; + date: string; + upgradeNum: string; +} + @Component({ selector: 'nz-demo-table-nested-table', template: ` @@ -83,8 +101,8 @@ import { Component, OnInit } from '@angular/core'; ` }) export class NzDemoTableNestedTableComponent implements OnInit { - listOfParentData: any[] = []; - listOfChildrenData: any[] = []; + listOfParentData: ParentItemData[] = []; + listOfChildrenData: ChildrenItemData[] = []; ngOnInit(): void { for (let i = 0; i < 3; ++i) { diff --git a/components/table/demo/reset-filter.ts b/components/table/demo/reset-filter.ts index 474b5590afc..0f5c19f6880 100644 --- a/components/table/demo/reset-filter.ts +++ b/components/table/demo/reset-filter.ts @@ -5,6 +5,7 @@ interface Data { age: number; address: string; + // tslint:disable-next-line:no-any [key: string]: any; } @@ -91,7 +92,7 @@ export class NzDemoTableResetFilterComponent { } ]; listOfDisplayData = [...this.listOfData]; - mapOfSort: { [key: string]: any } = { + mapOfSort: { [key: string]: string | null } = { name: null, age: null, address: null diff --git a/components/table/demo/row-selection-custom.ts b/components/table/demo/row-selection-custom.ts index bb228af84b7..b980af82ff5 100644 --- a/components/table/demo/row-selection-custom.ts +++ b/components/table/demo/row-selection-custom.ts @@ -1,5 +1,12 @@ import { Component, OnInit } from '@angular/core'; +interface ItemData { + id: number; + name: string; + age: number; + address: string; +} + @Component({ selector: 'nz-demo-table-row-selection-custom', template: ` @@ -60,11 +67,11 @@ export class NzDemoTableRowSelectionCustomComponent implements OnInit { ]; isAllDisplayDataChecked = false; isIndeterminate = false; - listOfDisplayData: any[] = []; - listOfAllData: any[] = []; + listOfDisplayData: ItemData[] = []; + listOfAllData: ItemData[] = []; mapOfCheckedId: { [key: string]: boolean } = {}; - currentPageDataChange($event: Array<{ id: number; name: string; age: number; address: string }>): void { + currentPageDataChange($event: ItemData[]): void { this.listOfDisplayData = $event; this.refreshStatus(); } diff --git a/components/tabs/demo/slide.ts b/components/tabs/demo/slide.ts index 7586c432326..c831e5f954b 100644 --- a/components/tabs/demo/slide.ts +++ b/components/tabs/demo/slide.ts @@ -27,7 +27,7 @@ import { Component, OnInit } from '@angular/core'; ` }) export class NzDemoTabsSlideComponent implements OnInit { - tabs: any[] = []; + tabs: Array<{ name: string; content: string }> = []; nzTabPosition = 'top'; selectedIndex = 0; diff --git a/components/transfer/demo/advanced.ts b/components/transfer/demo/advanced.ts index 8dade942f0e..dcbaa2655fb 100644 --- a/components/transfer/demo/advanced.ts +++ b/components/transfer/demo/advanced.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { NzMessageService } from 'ng-zorro-antd/message'; +import { TransferItem } from 'ng-zorro-antd/transfer'; @Component({ selector: 'nz-demo-transfer-advanced', @@ -24,20 +25,20 @@ import { NzMessageService } from 'ng-zorro-antd/message'; ` }) export class NzDemoTransferAdvancedComponent implements OnInit { - list: Array<{ key: string; title: string; description: string; direction: string }> = []; + list: TransferItem[] = []; ngOnInit(): void { this.getData(); } getData(): void { - const ret: Array<{ key: string; title: string; description: string; direction: string }> = []; + const ret: TransferItem[] = []; for (let i = 0; i < 20; i++) { ret.push({ key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, - direction: Math.random() * 2 > 1 ? 'right' : '' + direction: Math.random() * 2 > 1 ? 'right' : undefined }); } this.list = ret; diff --git a/components/transfer/demo/basic.ts b/components/transfer/demo/basic.ts index 2646f07394b..734e480c92d 100644 --- a/components/transfer/demo/basic.ts +++ b/components/transfer/demo/basic.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { TransferItem } from 'ng-zorro-antd/transfer'; @Component({ selector: 'nz-demo-transfer-basic', @@ -18,8 +19,7 @@ import { Component, OnInit } from '@angular/core'; ` }) export class NzDemoTransferBasicComponent implements OnInit { - // tslint:disable-next-line:no-any - list: any[] = []; + list: TransferItem[] = []; disabled = false; ngOnInit(): void { diff --git a/components/transfer/demo/can-move.ts b/components/transfer/demo/can-move.ts index dad4e9c6ed2..4f742fe2b1c 100644 --- a/components/transfer/demo/can-move.ts +++ b/components/transfer/demo/can-move.ts @@ -16,7 +16,7 @@ import { delay } from 'rxjs/operators'; ` }) export class NzDemoTransferCanMoveComponent implements OnInit { - list: Array<{ key: string; title: string; disabled: boolean; direction?: string }> = []; + list: TransferItem[] = []; ngOnInit(): void { for (let i = 0; i < 20; i++) { diff --git a/components/transfer/demo/custom-item.ts b/components/transfer/demo/custom-item.ts index 9ed3b13614a..ff0f9d6e5f0 100644 --- a/components/transfer/demo/custom-item.ts +++ b/components/transfer/demo/custom-item.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { NzMessageService } from 'ng-zorro-antd/message'; +import { TransferItem } from 'ng-zorro-antd/transfer'; @Component({ selector: 'nz-demo-transfer-custom-item', @@ -16,20 +17,20 @@ import { NzMessageService } from 'ng-zorro-antd/message'; ` }) export class NzDemoTransferCustomItemComponent implements OnInit { - list: Array<{ key: string; title: string; description: string; direction: string; icon: string }> = []; + list: Array = []; ngOnInit(): void { this.getData(); } getData(): void { - const ret: Array<{ key: string; title: string; description: string; direction: string; icon: string }> = []; + const ret: Array = []; for (let i = 0; i < 20; i++) { ret.push({ key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, - direction: Math.random() * 2 > 1 ? 'right' : '', + direction: Math.random() * 2 > 1 ? 'right' : undefined, icon: `frown-o` }); } diff --git a/components/transfer/demo/module b/components/transfer/demo/module index 910486cf6f7..b0182ea7871 100644 --- a/components/transfer/demo/module +++ b/components/transfer/demo/module @@ -6,4 +6,12 @@ import { NzTableModule } from 'ng-zorro-antd/table'; import { NzTagModule } from 'ng-zorro-antd/tag'; import { NzTreeModule } from 'ng-zorro-antd/tree'; -export const moduleList = [ NzTransferModule, NzButtonModule, NzSwitchModule, NzIconModule, NzTableModule, NzTagModule, NzTreeModule ]; +export const moduleList = [ + NzTransferModule, + NzButtonModule, + NzSwitchModule, + NzIconModule, + NzTableModule, + NzTagModule, + NzTreeModule +]; diff --git a/components/transfer/demo/search.ts b/components/transfer/demo/search.ts index 6c3b137cbd5..442b21d2bc4 100644 --- a/components/transfer/demo/search.ts +++ b/components/transfer/demo/search.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { TransferItem } from 'ng-zorro-antd/transfer'; @Component({ selector: 'nz-demo-transfer-search', @@ -20,8 +21,7 @@ import { Component, OnInit } from '@angular/core'; ` }) export class NzDemoTransferSearchComponent implements OnInit { - // tslint:disable-next-line:no-any - list: any[] = []; + list: TransferItem[] = []; disabled = false; ngOnInit(): void { @@ -30,7 +30,7 @@ export class NzDemoTransferSearchComponent implements OnInit { key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, - direction: Math.random() * 2 > 1 ? 'right' : '' + direction: Math.random() * 2 > 1 ? 'right' : undefined }); } } diff --git a/components/transfer/demo/table-transfer.ts b/components/transfer/demo/table-transfer.ts index 4bfded04ea7..b3e1a970d73 100644 --- a/components/transfer/demo/table-transfer.ts +++ b/components/transfer/demo/table-transfer.ts @@ -62,8 +62,7 @@ import { TransferItem } from 'ng-zorro-antd/transfer'; ` }) export class NzDemoTransferTableTransferComponent implements OnInit { - // tslint:disable-next-line:no-any - list: any[] = []; + list: TransferItem[] = []; disabled = false; showSearch = false; diff --git a/components/transfer/demo/tree-transfer.ts b/components/transfer/demo/tree-transfer.ts index 5787c61e70c..00199aa598c 100644 --- a/components/transfer/demo/tree-transfer.ts +++ b/components/transfer/demo/tree-transfer.ts @@ -1,4 +1,3 @@ -// tslint:disable: no-any import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'; import { NzTreeNode } from 'ng-zorro-antd/core'; import { TransferChange, TransferItem } from 'ng-zorro-antd/transfer'; @@ -38,7 +37,7 @@ import { NzTreeComponent } from 'ng-zorro-antd/tree'; }) export class NzDemoTransferTreeTransferComponent { @ViewChild('tree', { static: true }) tree: NzTreeComponent; - list: any[] = [ + list: TransferItem[] = [ { id: 1, parentid: 0, title: 'parent 1' }, { id: 2, parentid: 1, title: 'leaf 1-1', disabled: true, isLeaf: true }, { id: 3, parentid: 1, title: 'leaf 1-2', isLeaf: true } @@ -48,6 +47,7 @@ export class NzDemoTransferTreeTransferComponent { private generateTree(arr: TransferItem[]): TransferItem[] { const tree: TransferItem[] = []; + // tslint:disable-next-line:no-any const mappedArr: any = {}; let arrElem: TransferItem; let mappedElem: TransferItem; @@ -85,7 +85,7 @@ export class NzDemoTransferTreeTransferComponent { } } const item = this.list.find(w => w.id === node.origin.id); - onItemSelect(item); + onItemSelect(item!); } change(ret: TransferChange): void { diff --git a/components/tree-select/demo/async.ts b/components/tree-select/demo/async.ts index 33c61e3bbca..095630a3e64 100755 --- a/components/tree-select/demo/async.ts +++ b/components/tree-select/demo/async.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { NzFormatEmitEvent } from 'ng-zorro-antd/core'; +import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/core'; @Component({ selector: 'nz-demo-tree-select-async', @@ -46,7 +46,7 @@ export class NzDemoTreeSelectAsyncComponent { } ]; - onExpandChange(e: Required): void { + onExpandChange(e: NzFormatEmitEvent): void { const node = e.node; if (node && node.getChildren().length === 0 && node.isExpanded) { this.loadNode().then(data => { @@ -55,7 +55,7 @@ export class NzDemoTreeSelectAsyncComponent { } } - loadNode(): Promise { + loadNode(): Promise { return new Promise(resolve => { setTimeout( () => diff --git a/components/upload/demo/drag.ts b/components/upload/demo/drag.ts index 9bcce043163..56d571c779b 100644 --- a/components/upload/demo/drag.ts +++ b/components/upload/demo/drag.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { NzMessageService } from 'ng-zorro-antd/message'; +import { UploadChangeParam } from 'ng-zorro-antd/upload'; @Component({ selector: 'nz-demo-upload-drag', @@ -23,8 +24,7 @@ import { NzMessageService } from 'ng-zorro-antd/message'; }) export class NzDemoUploadDragComponent { constructor(private msg: NzMessageService) {} - // tslint:disable-next-line:no-any - handleChange({ file, fileList }: { [key: string]: any }): void { + handleChange({ file, fileList }: UploadChangeParam): void { const status = file.status; if (status !== 'uploading') { console.log(file, fileList);