adding types to 7

step1-07/src/TodoApp.types.ts

@@ -0,0 +1,10 @@
+export type FilterTypes = 'all' | 'active' | 'completed';
+
+export interface TodoItem {
+  label: string;
+  completed: boolean;
+}
+
+export interface Todos {
+  [id: string]: TodoItem;
+}

step1-07/src/components/TodoFooter.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
+import { Todos } from '../TodoApp.types';
+interface TodoFooterProps {
+  clear: () => void;
+  todos: Todos;
+}
 
-export const TodoFooter = (props: any) => {
+export const TodoFooter = (props: TodoFooterProps) => {
   const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
   return (
     <footer>

step1-07/src/components/TodoHeader.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
+import { FilterTypes } from '../TodoApp.types';
 
-export class TodoHeader extends React.Component<any, any> {
+interface TodoHeaderProps {
+  addTodo: (label: string) => void;
+  setFilter: (filter: FilterTypes) => void;
+  filter: FilterTypes;
+}
+
+export class TodoHeader extends React.Component<TodoHeaderProps, any> {
   constructor(props) {
     super(props);
     this.state = { labelInput: '' };
   }
 
   render() {
-    const { filter } = this.props;
+    const { filter, setFilter } = this.props;
     return (
       <div>
         <h1>todos</h1>
@@ -16,13 +23,13 @@ export class TodoHeader extends React.Component<any, any> {
           Add
         </button>
         <div className="filter">
-          <button onClick={() => this._onFilter('all')} className={filter == 'all' ? 'active' : ''}>
+          <button onClick={() => setFilter('all')} className={filter == 'all' ? 'active' : ''}>
             all
           </button>
-          <button onClick={() => this._onFilter('active')} className={filter == 'active' ? 'active' : ''}>
+          <button onClick={() => setFilter('active')} className={filter == 'active' ? 'active' : ''}>
             active
           </button>
-          <button onClick={() => this._onFilter('completed')} className={filter == 'completed' ? 'active' : ''}>
+          <button onClick={() => setFilter('completed')} className={filter == 'completed' ? 'active' : ''}>
             completed
           </button>
         </div>
@@ -30,10 +37,6 @@ export class TodoHeader extends React.Component<any, any> {
     );
   }
 
-  _onFilter = filter => {
-    this.props.setFilter(filter);
-  };
-
   _onChange = evt => {
     this.setState({ labelInput: evt.target.value });
   };

step1-07/src/components/TodoList.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import { TodoListItem } from './TodoListItem';
+import { FilterTypes, Todos } from '../TodoApp.types';
 
-export class TodoList extends React.Component<any, any> {
+interface TodoListProps {
+  complete: (id: string) => void;
+  todos: Todos;
+  filter: FilterTypes;
+}
+
+export class TodoList extends React.Component<TodoListProps, any> {
   render() {
     const { filter, todos, complete } = this.props;
 
@@ -12,7 +19,7 @@ export class TodoList extends React.Component<any, any> {
     return (
       <ul className="todos">
         {filteredTodos.map(id => (
-          <TodoListItem key={id} id={id} {...todos[id]} complete={complete} />
+          <TodoListItem key={id} id={id} complete={complete} {...todos[id]} />
         ))}
       </ul>
     );

step1-07/src/components/TodoListItem.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
+import { TodoItem } from '../TodoApp.types';
 
-export class TodoListItem extends React.Component<any, any> {
+interface TodoListItemProps extends TodoItem {
+  id: string;
+  complete: (id: string) => void;
+}
+
+export class TodoListItem extends React.Component<TodoListItemProps, any> {
   render() {
     const { label, completed, complete, id } = this.props;
 

step2-01/src/components/TodoHeader.tsx

@@ -6,7 +6,7 @@ import { FilterTypes } from '../store';
 interface TodoHeaderProps {
   addTodo: (label: string) => void;
   setFilter: (filter: FilterTypes) => void;
-  filter: string;
+  filter: FilterTypes;
 }
 
 interface TodoHeaderState {