Publish todo app

.prettierrc

@@ -7,6 +7,12 @@
       "options": {
         "printWidth": 48
       }
+    },
+    {
+      "files": ["snippets/snippets/**/longerWidth/*.ts"],
+      "options": {
+        "printWidth": 53
+      }
     }
   ]
 }

snippets/bin/generateSnippetsBundle.ts

@@ -9,6 +9,7 @@ const regenerate = () => {
         const contents = fs.readFileSync(file, 'utf8')
         return `export const ${file
           .replace(/\.\/snippets\/snippets\/\w+\//, '')
+          .replace(/longerWidth\//, '')
           .replace(/\.ts/, '')} = \`${contents
           .trim()
           .replace(/^;/m, '')

snippets/snippets/todo/bpmz.ts

@@ -0,0 +1,5 @@
+type CompletedTodo = Readonly<{
+  id: number
+  text: string
+  done: true
+}>

snippets/snippets/todo/csum.ts

@@ -1,4 +1,4 @@
-// todo must match the Todo type
+// Parameter "todo" must match the Todo type
 function toggleTodo(todo: Todo) {
   // ...
 }

snippets/snippets/todo/dxfc.ts

@@ -1,5 +1,5 @@
 // Associated data. If we're using React, this
-// would be the todo component’s props or state
+// would be the component’s props or state
 ;[
   { id: 1, text: 'First todo', done: false },
   { id: 2, text: 'Second todo', done: false }

snippets/snippets/todo/eega.ts

@@ -0,0 +1,5 @@
+else {
+  // place = 'work' or { custom: string }, and
+  // place.custom is invalid if place = 'work'
+  return 'pinEmoji ' + place.custom
+}

snippets/snippets/todo/frtm.ts

@@ -5,7 +5,7 @@ type Todo = {
 }
 
 // Make sure that the input and the output
-// is of the correct type
+// are of the correct type (both must be Todo)
 function toggleTodo(todo: Todo): Todo {
   // ...
 }

snippets/snippets/todo/hquv.ts

@@ -0,0 +1,8 @@
+;[
+  // ...
+  // ...
+  // ...
+  // ...
+  // No place property
+  { id: 5, text: 'Read a book', done: false }
+]

snippets/snippets/todo/hszk.ts

@@ -0,0 +1,8 @@
+function completeAll(
+  todos: readonly Todo[]
+): CompletedTodo[] {
+  return todos.map(todo => ({
+    ...todo,
+    done: true
+  }))
+}

snippets/snippets/todo/lgci.ts

@@ -1,10 +1,3 @@
-// Same as before: Each property is readonly
-type Todo = Readonly<{
-  id: number
-  text: string
-  done: boolean
-}>
-
 // Input is an array of Todo items: Todo[]
 function completeAll(todos: Todo[]) {
   // ...

snippets/snippets/todo/longerWidth/dhor.ts

@@ -0,0 +1,17 @@
+type Place = 'home' | 'work' | { custom: string }
+
+// TypeScript knows what the type of "place"
+// would be at each point inside the function
+function placeToString(place: Place): string {
+  // In here, place = 'home', 'work' or { custom:… }
+
+  if (place === 'home') {
+    // In here, place = 'home'
+
+    return 'homeEmoji Home'
+  } else {
+    // In here, place = 'work' or { custom: string }
+
+    return 'pinEmoji ' + place.custom
+  }
+}

snippets/snippets/todo/longerWidth/fawy.ts

@@ -0,0 +1,7 @@
+type Place = 'home' | 'work' | { custom: string }
+
+// They all compile
+const place1: Place = 'home'
+const place2: Place = 'work'
+const place3: Place = { custom: 'Gym' }
+const place4: Place = { custom: 'Supermarket' }

snippets/snippets/todo/longerWidth/ntup.ts

@@ -0,0 +1,18 @@
+// If we have a variable that’s a union type…
+type Place = 'home' | 'work' | { custom: string }
+
+function placeToString(place: Place): string {
+  // TypeScript is smart about what the variable’s
+  // possible values are for each branch of if/else
+
+  if (place === 'home') {
+    // TypeScript knows place = 'home' here
+    // (So it won’t compile if you do place.custom)
+  } else if (place === 'work') {
+    // TypeScript knows place = 'work' here
+    // (So it won’t compile if you do place.custom)
+  } else {
+    // TypeScript knows place = { custom: … } here
+    // (So you can do place.custom)
+  }
+}

snippets/snippets/todo/longerWidth/rvyq.ts

@@ -0,0 +1,9 @@
+type Place = 'home' | 'work' | { custom: string }
+
+type Todo = Readonly<{
+  id: number
+  text: string
+  done: boolean
+  // place is optional
+  place?: Place
+}>

snippets/snippets/todo/longerWidth/szco.ts

@@ -0,0 +1,11 @@
+// Correct implementation
+function placeToString(place: Place): string {
+  if (place === 'home') {
+    return 'homeEmoji Home'
+  } else if (place === 'work') {
+    return 'workEmoji Work'
+  } else {
+    // place is guaranteed to be { custom: string }
+    return 'pinEmoji ' + place.custom
+  }
+}

snippets/snippets/todo/longerWidth/umjt.ts

@@ -0,0 +1 @@
+type Place = 'home' | 'work' | { custom: string }

snippets/snippets/todo/longerWidth/vgja.ts

@@ -0,0 +1,10 @@
+type Place = 'home' | 'work' | { custom: string }
+
+// Little Duckling’s implementation
+function placeToString(place: Place): string {
+  if (place === 'home') {
+    return 'homeEmoji Home'
+  } else {
+    return 'pinEmoji ' + place.custom
+  }
+}

snippets/snippets/todo/longerWidth/wymp.ts

@@ -0,0 +1,13 @@
+const argument = {
+  id: 1,
+  text: '…',
+  done: true
+}
+
+console.log('Before toggleTodo(), argument is:')
+console.log(argument)
+
+toggleTodo(argument)
+
+console.log('After toggleTodo(), argument is:')
+console.log(argument)

snippets/snippets/todo/mwrj.ts

@@ -1,4 +1,4 @@
-// After declaring todos as: readonly Todo[],
+// After declaring todos as readonly Todo[],
 // the following code WILL NOT compile:
 
 // Compile error - modifies the array

snippets/snippets/todo/mxqy.ts

@@ -0,0 +1,5 @@
+type Todo = Readonly<{
+  id: number
+  text: string
+  done: boolean
+}>

snippets/snippets/todo/mzyn.ts

@@ -0,0 +1,7 @@
+// Creates a union type of number and string
+type Foo = number | string
+
+// You can assign either a number or a string
+// variable to Foo. So these will both compile:
+const a: Foo = 1
+const b: Foo = 'hello'

snippets/snippets/todo/njgr.ts

@@ -1,7 +1,7 @@
 function toggleTodo(todo: Todo): Todo {
   // Little Duckling’s refactoring is a
   // bad refactoring because it modifies
-  // the original todo object
+  // the argument (input) todo object
   todo.done = !todo.done
   return todo
 }

snippets/snippets/todo/npgx.ts

@@ -0,0 +1,6 @@
+type Todo = Readonly<{
+  id: number
+  text: string
+  done: boolean
+  place: Place
+}>

snippets/snippets/todo/npog.ts

@@ -0,0 +1,7 @@
+type Todo = Readonly<{
+  id: number
+  text: string
+  done: boolean
+  // place is optional
+  place?: Place
+}>

snippets/snippets/todo/okva.ts

@@ -0,0 +1,6 @@
+console.log(
+  completeAll([
+    { id: 1, text: '…', done: false },
+    { id: 2, text: '…', done: true }
+  ])
+)

snippets/snippets/todo/oone.ts

@@ -0,0 +1,6 @@
+// Returns an array where "done" is all true
+function completeAll(
+  todos: readonly Todo[]
+): CompletedTodo[] {
+  // ...
+}

snippets/snippets/todo/qbgu.ts

@@ -1,6 +1,5 @@
-// Returns a new todo object
-// with the opposite boolean value
-// for the "done" proprty.
+// We said earlier that
+// toggleTodo must return a new todo object.
 function toggleTodo(todo) {
   // ...
 }

snippets/snippets/todo/qnrh.ts

@@ -0,0 +1,11 @@
+placeToString('home')
+// __home__
+
+placeToString('work')
+// __work__
+
+placeToString({ custom: 'Gym' })
+// __gym__
+
+placeToString({ custom: 'Supermarket' })
+// __supermarket__

snippets/snippets/todo/qnwc.ts

@@ -0,0 +1,11 @@
+// They booth have a property foo,
+// but B’s foo (true) is
+// more specific than A’s foo (boolean)
+type A = { foo: boolean }
+type B = { foo: true }
+
+// This intersection type…
+type AandB = A & B
+
+// …is equivalent to:
+type AandB = { foo: true }

snippets/snippets/todo/rlya.ts

@@ -0,0 +1,11 @@
+type Todo = Readonly<{
+  id: number
+  text: string
+  done: boolean
+}>
+
+type CompletedTodo = Readonly<{
+  id: number
+  text: string
+  done: true
+}>

snippets/snippets/todo/rmuo.ts

@@ -0,0 +1,10 @@
+type Todo = Readonly<{
+  id: number
+  text: string
+  done: boolean
+}>
+
+// Override the done property of Todo
+type CompletedTodo = Todo & {
+  readonly done: true
+}

snippets/snippets/todo/ruga.ts

@@ -0,0 +1,5 @@
+function completeAll(
+  todos: readonly Todo[]
+): CompletedTodo[] {
+  // ...
+}

snippets/snippets/todo/vgnq.ts

@@ -1,5 +1,11 @@
-// This will continue to work because
-// the input todo is not modified
+type Todo = {
+  readonly id: number
+  readonly text: string
+  readonly done: boolean
+}
+
+// Earlier implementation: it will continue to
+// work because the input todo is not modified
 function toggleTodo(todo: Todo): Todo {
   return {
     id: todo.id,

snippets/snippets/todo/vpco.ts

@@ -1,11 +1,14 @@
-// Returns a new todo object with the opposite
+// Takes a single todo object and returns
+// a new todo object containing the opposite
 // boolean value for the "done" proprty.
 function toggleTodo(todo) {
-  // Case 1: If todo is
-  // { id: …, text: '…', done: true }, return
-  // { id: …, text: '…', done: false }
-  //
-  // Case 2: If todo is
-  // { id: …, text: '…', done: false }, return
-  // { id: …, text: '…', done: true }
+  // ...
 }
+
+// Example usage:
+
+toggleTodo({ id: …, text: '…', done: true })
+// -> returns { id: …, text: '…', done: false }
+
+toggleTodo({ id: …, text: '…', done: false })
+// -> returns { id: …, text: '…', done: true }

snippets/snippets/todo/wdjp.ts

@@ -0,0 +1,11 @@
+type A = { a: number }
+type B = { b: string }
+
+// This intersection type…
+type AandB = A & B
+
+// …is equivalent to:
+type AandB = {
+  a: number
+  b: string
+}

snippets/snippets/todo/whae.ts

@@ -0,0 +1,9 @@
+function completeAll(
+  todos: readonly Todo[]
+): CompletedTodo[] {
+  return todos.map(todo => ({
+    ...todo,
+    // What if we set done to false?
+    done: false
+  }))
+}