diff --git a/snippets/snippets/todo/kuzw.ts b/snippets/snippets/todo/kuzw.ts new file mode 100644 index 0000000..ca1a5cd --- /dev/null +++ b/snippets/snippets/todo/kuzw.ts @@ -0,0 +1,4 @@ +function completeAll(todos: Todo[]): Todo[] { + // We want it to return a new array + // instead of modifying the original array +} diff --git a/snippets/snippets/todo/lgci.ts b/snippets/snippets/todo/lgci.ts index 7b38bfe..269eace 100644 --- a/snippets/snippets/todo/lgci.ts +++ b/snippets/snippets/todo/lgci.ts @@ -1,4 +1,4 @@ -// Same as before +// Same as before: Each property is readonly type Todo = Readonly<{ id: number text: string diff --git a/src/lib/snippets.ts b/src/lib/snippets.ts index b808f9e..93deb01 100644 --- a/src/lib/snippets.ts +++ b/src/lib/snippets.ts @@ -530,7 +530,12 @@ function toggleTodo( // ... }` -export const lgci = `// Same as before +export const kuzw = `function completeAll(todos: Todo[]): Todo[] { + // We want it to return a new array + // instead of modifying the original array +}` + +export const lgci = `// Same as before: Each property is readonly type Todo = Readonly<{ id: number text: string diff --git a/src/pages/todo.tsx b/src/pages/todo.tsx index 968f4df..0ad9e6d 100644 --- a/src/pages/todo.tsx +++ b/src/pages/todo.tsx @@ -212,7 +212,7 @@ const Page = () => ( />

As you can see, when you check/uncheck a checkbox, it updates the - underlying data (the done property), and in turn the + underlying data (the done property), and in turn, the UI gets updated. This is how UI libraries like React and Vue work.

( description={ <> When the user interacts with the UI, the data gets updated, - and in turn the UI gets updated + and in turn, the UI gets updated } /> @@ -356,7 +356,7 @@ const Page = () => ( Now, here’s a question:{' '} How can we prevent mistakes like this?{' '} Little Duckling is a junior developer, but we want to make sure - that he succeeds at his job by helping him make less mistakes. + that he succeeds at his job by helping him make fewer mistakes.

( />

Yes! In TypeScript, you can use keywords like{' '} - Readonly<...> to conovert one type into another + Readonly<...> to convert one type into another type—in this case, it creates a new type with{' '} readonly properties.

@@ -827,7 +827,7 @@ const Page = () => (

1. We can define a type to make sure that the input - and the output of a function is of the correct type. + and the output of a function are of the correct type.

(

2. We can use the readonly keyword to make sure - that an object property is not modified. + that an object’s properties are not modified.

( />

Third, we want to make sure that{' '} - completeAll() returns a new array and does NOT modify - the original array. Each item in the array is already{' '} - readonly, but the array itself is NOT{' '} - readonly yet. + + completeAll() returns a new array and does NOT + modify the original array. +

+ lineIndex === 1} + />

- To make the array itself readonly,{' '} + Because we defined Todo earlier using{' '} + Readonly<...>, each todo item in the array is + already readonly. However, the array itself{' '} + is NOT readonly yet. +

+

+ + To make the array itself readonly, + {' '} we’ll add the readonly keyword to{' '} Todo[] like so: @@ -1017,7 +1029,8 @@ const Page = () => ( Yes, Little Duckling! We use the readonly keyword for arrays. And by doing so,{' '} - TypeScript will prevent you from accidently modifying the array. + TypeScript will prevent you from accidentally modifying the + array.