Remove unnecessary type casting in examples (#221)

src/button/example/index.ts

@@ -3,7 +3,7 @@ import { WidgetProperties } from '@dojo/widget-core/interfaces';
 import { StatefulMixin } from '@dojo/widget-core/mixins/Stateful';
 import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
 import { w, v } from '@dojo/widget-core/d';
-import Button, { ButtonType } from '../../button/Button';
+import Button from '../../button/Button';
 import dojoTheme from '../../themes/dojo/theme';
 
 export const AppBase = StatefulMixin(WidgetBase);
@@ -52,7 +52,7 @@ export class App extends AppBase<WidgetProperties> {
 					content: 'Open',
 					disabled: true,
 					popup: { expanded: false, id: 'fakeId' },
-					type: <ButtonType> 'menu'
+					type: 'menu'
 				})
 			]),
 			v('div', { id: 'example-3' }, [
@@ -63,7 +63,7 @@ export class App extends AppBase<WidgetProperties> {
 					key: 'b3',
 					theme: this._theme,
 					content: 'Button state',
-					pressed: <boolean> this.state.buttonPressed,
+					pressed: this.state.buttonPressed,
 					onClick: this.toggleButton
 				})
 			])

src/checkbox/example/index.ts

@@ -47,7 +47,7 @@ export class App extends AppBase<WidgetProperties> {
 				v('div', { id: 'example-1' }, [
 					w(Checkbox, {
 						key: 'c1',
-						checked: <boolean> c1,
+						checked: c1,
 						label: 'Sample checkbox that starts checked',
 						value: 'c1',
 						onChange: this.onChange,
@@ -58,7 +58,7 @@ export class App extends AppBase<WidgetProperties> {
 				v('div', { id: 'example-2' }, [
 					w(Checkbox, {
 						key: 'c2',
-						checked: <boolean> c2,
+						checked: c2,
 						label: 'Sample disabled checkbox',
 						disabled: true,
 						value: 'c2',
@@ -70,7 +70,7 @@ export class App extends AppBase<WidgetProperties> {
 				v('div', { id: 'example-3' }, [
 					w(Checkbox, {
 						key: 'c3',
-						checked: <boolean> c3,
+						checked: c3,
 						label: 'Required checkbox',
 						required: true,
 						value: 'c3',
@@ -82,7 +82,7 @@ export class App extends AppBase<WidgetProperties> {
 				v('div', { id: 'example-4' }, [
 					w(Checkbox, {
 						key: 'c4',
-						checked: <boolean> c4,
+						checked: c4,
 						label: 'Checkbox in "toggle" mode',
 						mode: Mode.toggle,
 						value: 'c4',
@@ -94,7 +94,7 @@ export class App extends AppBase<WidgetProperties> {
 				v('div', { id: 'example-5' }, [
 					w(Checkbox, {
 						key: 'c5',
-						checked: <boolean> c5,
+						checked: c5,
 						label: 'Disabled toggle mode',
 						onLabel: 'On',
 						offLabel: 'Off',

src/combobox/example/index.ts

@@ -5,7 +5,7 @@ import { v, w } from '@dojo/widget-core/d';
 import { WidgetBase } from '@dojo/widget-core/WidgetBase';
 import { WidgetProperties } from '@dojo/widget-core/interfaces';
 import ComboBox from '../ComboBox';
-import ResultItem, { ResultItemProperties } from '../ResultItem';
+import ResultItem from '../ResultItem';
 import ResultMenu from '../ResultMenu';
 import dojoTheme from '../../themes/dojo/theme';
 
@@ -82,7 +82,7 @@ class CustomResultItem extends ResultItem {
 
 class CustomResultMenu extends ResultMenu {
 	renderResults(results: WNode[]) {
-		const items: any[] = [
+		const items: DNode[] = [
 			v('div', {
 				styles: {
 					fontWeight: 'bold',
@@ -94,8 +94,8 @@ class CustomResultMenu extends ResultMenu {
 
 		let lastLetter = 'a';
 
-		results.forEach(item => {
-			let state = (<ResultItemProperties> (<WNode> item).properties).result.value;
+		results.forEach((item: WNode<ResultItem>) => {
+			let state = item.properties.result.value;
 			let letter = state.charAt(0).toLowerCase();
 			if (letter !== lastLetter) {
 				items.push(v('div', {
@@ -146,11 +146,13 @@ export class App extends StatefulMixin(WidgetBase)<WidgetProperties> {
 			w(ComboBox, {
 				key: '2',
 				clearable: true,
-				onChange: (value: string) => this.setState({ 'value2': value }),
-				getResultLabel: (result: any) => <string> result.value,
+				onChange: (value: string) => {
+					this.setState({ 'value2': value });
+				},
+				getResultLabel: (result: any) => result.value,
 				onRequestResults: this.onRequestResults,
-				results: <any[]> this.state['results'],
-				value: <string> this.state['value2'],
+				results: this.state.results,
+				value: this.state.value2,
 				inputProperties: {
 					placeholder: 'Enter a value'
 				},
@@ -160,11 +162,13 @@ export class App extends StatefulMixin(WidgetBase)<WidgetProperties> {
 			w(ComboBox, {
 				key: '1',
 				openOnFocus: true,
-				onChange: (value: string) => this.setState({ 'value1': value }),
-				getResultLabel: (result: any) => <string> result.value,
+				onChange: (value: string) => {
+					this.setState({ 'value1': value });
+				},
+				getResultLabel: (result: any) => result.value,
 				onRequestResults: this.onRequestResults,
-				results: <any[]> this.state['results'],
-				value: <string> this.state['value1'],
+				results: this.state.results,
+				value: this.state.value1,
 				inputProperties: {
 					placeholder: 'Enter a value'
 				},
@@ -174,12 +178,14 @@ export class App extends StatefulMixin(WidgetBase)<WidgetProperties> {
 			w(ComboBox, {
 				key: '3',
 				openOnFocus: true,
-				onChange: (value: string) => this.setState({ 'value3': value }),
-				getResultLabel: (result: any) => <string> result.value,
+				onChange: (value: string) => {
+					this.setState({ 'value3': value });
+				},
+				getResultLabel: (result: any) => result.value,
 				onRequestResults: this.onRequestResults,
 				customResultItem: CustomResultItem,
-				results: <any[]> this.state['results'],
-				value: <string> this.state['value3'],
+				results: this.state.results,
+				value: this.state.value3,
 				inputProperties: {
 					placeholder: 'Enter a value'
 				},
@@ -188,11 +194,13 @@ export class App extends StatefulMixin(WidgetBase)<WidgetProperties> {
 			v('h3', ['Custom menu renderer']),
 			w(ComboBox, {
 				key: '4',
-				onChange: (value: string) => this.setState({ 'value4': value }),
-				getResultLabel: (result: any) => <string> result.value,
+				onChange: (value: string) => {
+					this.setState({ 'value4': value });
+				},
+				getResultLabel: (result: any) => result.value,
 				onRequestResults: this.onRequestResults,
-				results: <any[]> this.state['results'],
-				value: <string> this.state['value4'],
+				results: this.state.results,
+				value: this.state.value4,
 				customResultMenu: CustomResultMenu,
 				inputProperties: {
 					placeholder: 'Enter a value'
@@ -202,11 +210,13 @@ export class App extends StatefulMixin(WidgetBase)<WidgetProperties> {
 			v('h3', ['Disabled menu items']),
 			w(ComboBox, {
 				key: '5',
-				onChange: (value: string) => this.setState({ 'value5': value }),
-				getResultLabel: (result: any) => <string> result.value,
+				onChange: (value: string) => {
+					this.setState({ 'value5': value });
+				},
+				getResultLabel: (result: any) => result.value,
 				onRequestResults: this.onRequestResults,
-				results: <any[]> this.state['results'],
-				value: <string> this.state['value5'],
+				results: this.state.results,
+				value: this.state.value5,
 				isResultDisabled: (result: any) => result.value.length > 9,
 				inputProperties: {
 					placeholder: 'Enter a value'
@@ -234,27 +244,31 @@ export class App extends StatefulMixin(WidgetBase)<WidgetProperties> {
 			v('h3', ['Label']),
 			w(ComboBox, {
 				key: '8',
-				onChange: (value: string) => this.setState({ 'value8': value }),
-				getResultLabel: (result: any) => <string> result.value,
+				onChange: (value: string) => {
+					this.setState({ 'value8': value });
+				},
+				getResultLabel: (result: any) => result.value,
 				onRequestResults: this.onRequestResults,
-				results: <any[]> this.state['results'],
-				value: <string> this.state['value8'],
+				results: this.state.results,
+				value: this.state.value8,
 				label: 'Enter a value',
 				theme: this._theme
 			}),
 			v('h3', ['Required and validated']),
 			w(ComboBox, {
 				key: '9',
 				required: true,
-				onChange: (value: string) => this.setState({
-					'value9': value,
-					invalid: value.trim().length === 0
-				}),
-				getResultLabel: (result: any) => <string> result.value,
+				onChange: (value: string) => {
+					this.setState({
+						'value9': value,
+						invalid: value.trim().length === 0
+					});
+				},
+				getResultLabel: (result: any) => result.value,
 				onRequestResults: this.onRequestResults,
-				results: <any[]> this.state['results'],
-				value: <string> this.state['value9'],
-				invalid: <boolean> this.state.invalid,
+				results: this.state.results,
+				value: this.state.value9,
+				invalid: this.state.invalid,
 				inputProperties: {
 					placeholder: 'Enter a value'
 				},

src/dialog/example/index.ts

@@ -37,10 +37,10 @@ export class App extends StatefulMixin(WidgetBase)<WidgetProperties> {
 			w(Dialog, {
 				key: 'dialog',
 				title: 'Dialog',
-				open: <boolean> this.state['open'],
-				modal: <boolean> this.state['modal'],
-				underlay: <boolean> this.state['underlay'],
-				closeable: <boolean> this.state['closeable'],
+				open: this.state.open,
+				modal: this.state.modal,
+				underlay: this.state.underlay,
+				closeable: this.state.closeable,
 				onRequestClose: () => {
 					this.setState({ open: false });
 				},

src/select/example/index.ts

@@ -108,22 +108,22 @@ export class App extends AppBase<WidgetProperties> {
 				label: 'Try changing me',
 				options: this._selectOptions,
 				useNativeElement: true,
-				value: <string> this.state['value1'],
+				value: this.state.value1,
 				theme: this._theme,
 				onChange: (option: OptionData) => {
 					this.setState({ value1: option.value });
 				}
 			}),
 			v('p', {
-				innerHTML: 'Result value: ' + this.state['value1']
+				innerHTML: 'Result value: ' + this.state.value1
 			}),
 			v('h2', {}, [ 'Custom Select Box, single select:' ]),
 			w(Select, {
 				key: 'select2',
 				customOption: CustomOption,
 				label: 'Custom box!',
 				options: this._selectOptions,
-				value: <string> this.state['value2'],
+				value: this.state.value2,
 				theme: this._theme,
 				onChange: (option: OptionData) => {
 					this.setState({ value2: option.value });
@@ -138,6 +138,7 @@ export class App extends AppBase<WidgetProperties> {
 				theme: this._theme,
 				onChange: (option: OptionData) => {
 					option.selected = !option.selected;
+					this.invalidate();
 				}
 			}),
 			v('h2', {}, [ 'Custom multiselect widget' ]),

src/slidepane/example/index.ts

@@ -32,9 +32,9 @@ export class App extends StatefulMixin(WidgetBase)<WidgetProperties> {
 		return v('div', [
 			w(SlidePane, {
 				key: 'pane',
-				open: <boolean> this.state['open'],
-				underlay: <boolean> this.state['underlay'],
-				align: <Align> this.state['align'],
+				open: this.state.open,
+				underlay: this.state.underlay,
+				align: this.state.align,
 				onRequestClose: () => {
 					this.setState({ open: false });
 				},

src/slider/example/index.ts

@@ -58,17 +58,17 @@ export class App extends AppBase<WidgetProperties> {
 					else { return 'I permanently altered the ecology of a planet for my tribbles'; }
 				},
 				step: 1,
-				value: <number> tribbleValue,
+				value: tribbleValue,
 				onInput: this.onTribbleInput,
 				theme: this._theme
 			}),
 			v('h1', {}, ['Vertical slider']),
 			w(Slider, {
 				key: 's2',
 				label: 'Vertical Slider with default properties. Anything over 50 is invalid:',
-				value: <number> verticalValue,
+				value: verticalValue,
 				vertical: true,
-				invalid: <boolean> verticalInvalid,
+				invalid: verticalInvalid,
 				output: (value: number) => {
 					return v('span', {
 						innerHTML: verticalInvalid ? value + ' !' : value + '',