From a235763b6b193251b8bf59a3e5065f732075bdd7 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Fri, 6 Dec 2019 05:02:04 -0800
Subject: [PATCH 1/2] Wordsmith

---
 src/pages/todo.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/todo.tsx b/src/pages/todo.tsx
index beb8c43..9ac35a7 100644
--- a/src/pages/todo.tsx
+++ b/src/pages/todo.tsx
@@ -634,7 +634,7 @@ const Page = () => (
                   children: (
                     <>
                       <P>
-                        Oops, I did it again! <Emoji type="sweat" />
+                        Oops, I messed up again! <Emoji type="sweat" />
                       </P>
                     </>
                   )
@@ -642,7 +642,7 @@ const Page = () => (
               ]}
             ></BubbleQuotes>
             <P>
-              No worries! <strong>The question is</strong>,{' '}
+              No worries, Little Duckling! <strong>The question is</strong>,{' '}
               <Highlight>
                 how can we use TypeScript to prevent a mistake like this?
               </Highlight>

From cef6385f26d5f0636b296a64327cb64c4bdd2ad6 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Fri, 6 Dec 2019 05:42:54 -0800
Subject: [PATCH 2/2] Recap

---
 snippets/snippets/todo/frtm.ts | 11 ++++++++
 snippets/snippets/todo/npah.ts | 11 ++++++++
 src/lib/snippets.ts            | 24 ++++++++++++++++++
 src/pages/todo.tsx             | 46 ++++++++++++++++++++++++++++++++++
 4 files changed, 92 insertions(+)
 create mode 100644 snippets/snippets/todo/frtm.ts
 create mode 100644 snippets/snippets/todo/npah.ts

diff --git a/snippets/snippets/todo/frtm.ts b/snippets/snippets/todo/frtm.ts
new file mode 100644
index 0000000..d18fb64
--- /dev/null
+++ b/snippets/snippets/todo/frtm.ts
@@ -0,0 +1,11 @@
+type Todo = {
+  id: number
+  text: string
+  done: boolean
+}
+
+// Make sure that the input and the output
+// is of the correct type
+function toggleTodo(todo: Todo): Todo {
+  // ...
+}
diff --git a/snippets/snippets/todo/npah.ts b/snippets/snippets/todo/npah.ts
new file mode 100644
index 0000000..28cfff3
--- /dev/null
+++ b/snippets/snippets/todo/npah.ts
@@ -0,0 +1,11 @@
+type Todo = {
+  readonly id: number
+  readonly text: string
+  readonly done: boolean
+}
+
+function toggleTodo(todo: Todo): Todo {
+  // This won’t compile
+  todo.done = !todo.done
+  return todo
+}
diff --git a/src/lib/snippets.ts b/src/lib/snippets.ts
index b12fea1..3da8feb 100644
--- a/src/lib/snippets.ts
+++ b/src/lib/snippets.ts
@@ -502,6 +502,18 @@ export const dxfc = `// Associated data. If we're using React, this
   { id: 2, text: 'Second todo', done: false }
 ]`
 
+export const frtm = `type Todo = {
+  id: number
+  text: string
+  done: boolean
+}
+
+// Make sure that the input and the output
+// is of the correct type
+function toggleTodo(todo: Todo): Todo {
+  // ...
+}`
+
 export const lieq = `type Todo = {
   id: number
   text: string
@@ -527,6 +539,18 @@ export const njgr = `function toggleTodo(todo: Todo): Todo {
   return todo
 }`
 
+export const npah = `type Todo = {
+  readonly id: number
+  readonly text: string
+  readonly done: boolean
+}
+
+function toggleTodo(todo: Todo): Todo {
+  // This won’t compile
+  todo.done = !todo.done
+  return todo
+}`
+
 export const ntau = `function toggleTodo(todo: Todo): Todo {
   // Little Duckling’s code from earlier:
   // Missing the "id" property
diff --git a/src/pages/todo.tsx b/src/pages/todo.tsx
index 9ac35a7..aae3d9d 100644
--- a/src/pages/todo.tsx
+++ b/src/pages/todo.tsx
@@ -719,6 +719,52 @@ const Page = () => (
           </>
         )
       },
+      {
+        color: 'green',
+        title: <>Types are like lightweight, automatic unit tests</>,
+        content: (
+          <>
+            <P>So far, we’ve learned the following:</P>
+            <P>
+              <strong>
+                1. We can define a <Code>type</Code> to make sure that the input
+                and the output of a function is of the correct type.
+              </strong>
+            </P>
+            <CodeBlock
+              snippet={snippets.frtm}
+              shouldHighlight={(lineNumber, tokenNumber) =>
+                (lineNumber === 0 && tokenNumber <= 2) ||
+                (lineNumber === 8 &&
+                  ((tokenNumber >= 5 && tokenNumber <= 7) ||
+                    tokenNumber === 11))
+              }
+            />
+            <P>
+              <strong>
+                2. We can use the <Code>readonly</Code> keyword to make sure
+                that an object property is not modified.
+              </strong>
+            </P>
+            <CodeBlock
+              snippet={snippets.npah}
+              shouldHighlight={(lineIndex, tokenIndex) =>
+                lineIndex >= 1 && lineIndex <= 3 && tokenIndex === 1
+              }
+            />
+            <P>
+              Before TypeScript, you needed to write unit tests to verify these
+              things. So in a sense,{' '}
+              <Highlight>
+                TypeScript’s types act as lightweight unit tests that run
+                automatically every time you save (compile) the code.
+              </Highlight>{' '}
+              It helps you write less buggy code with very little overhead.
+            </P>
+            <P>Next, let’s take a look at more non-trivial examples!</P>
+          </>
+        )
+      },
       // {
       //   title: (
       //     <>