How to use the @dojo/widgets/d.w function in @dojo/widgets

getChildrenNodes: function (this: Widget): DNode[] {
			const { properties: { todos, allCompleted: checked, activeFilter } } = this;
			const checkBoxProperties: CheckboxProperties = {
				id: 'todo-toggle',
				checked,
				classes: [ 'toggle-all' ],
				onChange: todoToggleAll
			};

			return [
				w(createCheckboxInput, checkBoxProperties),
				w(createTodoList, { todos, activeFilter })
			];
		}
	}

					.map((todo) => w(createTodoItem, todo));
			}

getChildrenNodes: function(this: TodoItem): (DNode | null)[] {
				const { properties: { id: todoId, completed: checked, label, editing: focused = false } } = this;

				return [
					v('div.view', [
						w(createCheckboxInput, { classes: [ 'toggle' ], checked, onChange: bind(todoToggleComplete, this) }),
						w(createLabel, { label, onDblclick: bind(todoEdit, this), onKeypress: bind(todoEdit, this) }),
						w(createButton, { classes: [ 'destroy' ], onClick: bind(todoRemove, this) })
					]),
					focused ? w(createFocusableTextInput, {
						value: label,
						id: todoId,
						focused, classes: [ 'edit' ],
						onBlur: bind(todoSave, this),
						onKeyUp: bind(todoEditInput, this)
					}) : null
				];
			}
		}

getChildrenNodes: function(this: TodoFooter): (DNode | null)[] {
			const { activeCount, activeFilter, completedCount } = this.properties;
			const countLabel = activeCount === 1 ? 'item' : 'items';

			return [
				v('span', { 'class': 'todo-count' }, [
					v('strong', [activeCount + ' ']),
					v('span', [countLabel + ' left'])
				]),
				w(createTodoFilter, {
					classes: [ 'filters' ],
					activeFilter
				}),
				completedCount ? w(createButton, {
					onClick: clearCompleted,
					label: 'Clear completed',
					classes: [ 'clear-completed' ]
				}) : null
			];
		}
	}

getChildrenNodes: function (this: Widget): DNode[] {
			const { properties: { todos, allCompleted: checked, activeFilter } } = this;
			const checkBoxProperties: CheckboxProperties = {
				id: 'todo-toggle',
				checked,
				classes: [ 'toggle-all' ],
				onChange: todoToggleAll
			};

			return [
				w(createCheckboxInput, checkBoxProperties),
				w(createTodoList, { todos, activeFilter })
			];
		}
	}

getChildrenNodes: function(this: TodoItem): (DNode | null)[] {
				const { properties: { id: todoId, completed: checked, label, editing: focused = false } } = this;

				return [
					v('div.view', [
						w(createCheckboxInput, { classes: [ 'toggle' ], checked, onChange: bind(todoToggleComplete, this) }),
						w(createLabel, { label, onDblclick: bind(todoEdit, this), onKeypress: bind(todoEdit, this) }),
						w(createButton, { classes: [ 'destroy' ], onClick: bind(todoRemove, this) })
					]),
					focused ? w(createFocusableTextInput, {
						value: label,
						id: todoId,
						focused, classes: [ 'edit' ],
						onBlur: bind(todoSave, this),
						onKeyUp: bind(todoEditInput, this)
					}) : null
				];
			}
		}

getChildrenNodes: function(this: TodoItem): (DNode | null)[] {
				const { properties: { id: todoId, completed: checked, label, editing: focused = false } } = this;

				return [
					v('div.view', [
						w(createCheckboxInput, { classes: [ 'toggle' ], checked, onChange: bind(todoToggleComplete, this) }),
						w(createLabel, { label, onDblclick: bind(todoEdit, this), onKeypress: bind(todoEdit, this) }),
						w(createButton, { classes: [ 'destroy' ], onClick: bind(todoRemove, this) })
					]),
					focused ? w(createFocusableTextInput, {
						value: label,
						id: todoId,
						focused, classes: [ 'edit' ],
						onBlur: bind(todoSave, this),
						onKeyUp: bind(todoEditInput, this)
					}) : null
				];
			}
		}

getChildrenNodes: function(this: TodoItem): (DNode | null)[] {
				const { properties: { id: todoId, completed: checked, label, editing: focused = false } } = this;

				return [
					v('div.view', [
						w(createCheckboxInput, { classes: [ 'toggle' ], checked, onChange: bind(todoToggleComplete, this) }),
						w(createLabel, { label, onDblclick: bind(todoEdit, this), onKeypress: bind(todoEdit, this) }),
						w(createButton, { classes: [ 'destroy' ], onClick: bind(todoRemove, this) })
					]),
					focused ? w(createFocusableTextInput, {
						value: label,
						id: todoId,
						focused, classes: [ 'edit' ],
						onBlur: bind(todoSave, this),
						onKeyUp: bind(todoEditInput, this)
					}) : null
				];
			}
		}

getChildrenNodes: function(this: TodoFooter): (DNode | null)[] {
			const { activeCount, activeFilter, completedCount } = this.properties;
			const countLabel = activeCount === 1 ? 'item' : 'items';

			return [
				v('span', { 'class': 'todo-count' }, [
					v('strong', [activeCount + ' ']),
					v('span', [countLabel + ' left'])
				]),
				w(createTodoFilter, {
					classes: [ 'filters' ],
					activeFilter
				}),
				completedCount ? w(createButton, {
					onClick: clearCompleted,
					label: 'Clear completed',
					classes: [ 'clear-completed' ]
				}) : null
			];
		}
	}