From 46442bd71fa32b21d6769412f04fae4d2394c843 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Sat, 23 Feb 2019 12:05:46 -0800
Subject: [PATCH] updated step 7

---
 step1-07/README.md             | 29 ++++++++++++++++++++++++++---
 step1-07/demo/src/TodoApp.tsx  |  2 +-
 step1-07/final/src/TodoApp.tsx |  2 +-
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/step1-07/README.md b/step1-07/README.md
index e5c450d..e2750c0 100644
--- a/step1-07/README.md
+++ b/step1-07/README.md
@@ -109,10 +109,33 @@ interface TodoListProps {
 
 > Note that the `[]` notation does not mean an array, it is a [computed property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) notation.
 
-## app
+Now that our interface is complete, try changing the word 'all' in `filter === all` and see that VS Code will tell you this condition will always be false. Imagine you had a typo in that line and you couldn't understand why your filter wasn't working.
 
-Add Types to TodoApp
-change 'filter' state value to demonstrate
+### Abstracting types
+
+Most of our components are going to need to add types for `todos` and `filter`, so it's a good thing that Typescript allows us to abstract those. I've already written up and exported those shared types in the file `TodoApp.types.ts`, so we just need to import them and pull them into our interface.
+
+```tsx
+import { FilterTypes, Todos } from '../TodoApp.types';
+
+interface TodoListProps {
+  complete: (id: string) => void;
+  todos: Todos;
+  filter: FilterTypes;
+}
+```
+
+### Updating TodoApp
+
+Our `TodoApp` doesn't take any props, but it does have state. We can use Typescript to define that as well.
+
+I've already imported `Todos`, and `FilterTypes` into the `TodoApp`, so we just need to add them to our class. We can even skip the 'interface', if we want to, and add them directly to the class.
+
+```tsx
+export class TodoApp extends React.Component<{}, { todos: Todos; filter: FilterTypes }>
+```
+
+> Note that the first value in `<>` always refers to props. Since `TodoApp` takes none, we'll set it to an empty object.
 
 ## List (open list next to app)
 
diff --git a/step1-07/demo/src/TodoApp.tsx b/step1-07/demo/src/TodoApp.tsx
index 759b8eb..8b55f4c 100644
--- a/step1-07/demo/src/TodoApp.tsx
+++ b/step1-07/demo/src/TodoApp.tsx
@@ -6,7 +6,7 @@ import { Todos, FilterTypes } from './TodoApp.types';
 
 let index = 0;
 
-export class TodoApp extends React.Component<any, any> {
+export class TodoApp extends React.Component<{}, { todos: Todos; filter: FilterTypes }> {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/step1-07/final/src/TodoApp.tsx b/step1-07/final/src/TodoApp.tsx
index 43ce7f9..6369456 100644
--- a/step1-07/final/src/TodoApp.tsx
+++ b/step1-07/final/src/TodoApp.tsx
@@ -6,7 +6,7 @@ import { Todos, FilterTypes } from './TodoApp.types';
 
 let index = 0;
 
-export class TodoApp extends React.Component<any, { todos: Todos; filter: FilterTypes }> {
+export class TodoApp extends React.Component<{}, { todos: Todos; filter: FilterTypes }> {
   constructor(props) {
     super(props);
     this.state = {