Todo app 2 (#11)

* Wordsmith

* Recap

Author: chibicode

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 {
+  // ...
+}

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
+}

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

src/pages/todo.tsx

@@ -634,15 +634,15 @@ const Page = () => (
                   children: (
                     <>
                       <P>
-                        Oops, I did it again! <Emoji type="sweat" />
+                        Oops, I messed up again! <Emoji type="sweat" />
                       </P>
                     </>
                   )
                 }
               ]}
             ></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>
@@ -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: (
       //     <>