More twoslashing

Author: mattpocock

book-content/chapters/05-unions-literals-and-narrowing.md

@@ -639,12 +639,19 @@ By adding this error condition, we can be sure that we will never reach any subs
 
 If we hover over `appElement` after the `if` statement, we can see that TypeScript now knows that `appElement` is an `HTMLElement` - it's no longer `null`. This means our test also now passes:
 
-```tsx
-console.log(appElement);
+```ts twoslash
+import { Equal, Expect } from "@total-typescript/helpers";
 
-// hovering over `appElement` shows:
+const appElement = document.getElementById("app");
 
-const appElement: HTMLElement;
+if (!appElement) {
+  throw new Error("Could not find app element");
+}
+
+// ---cut---
+
+console.log(appElement);
+//          ^?
 
 type Test = Expect<Equal<typeof appElement, HTMLElement>>; // passes
 ```
@@ -1310,14 +1317,29 @@ type State =
 
 Now, if we hover over `state.error` in the `renderUI` function, we can see that TypeScript knows that `state.error` is a `string`:
 
-```typescript
+```ts twoslash
+type State =
+  | {
+      status: "loading";
+    }
+  | {
+      status: "error";
+      error: string;
+    }
+  | {
+      status: "success";
+      data: string;
+    };
+
+// ---cut---
 const renderUI = (state: State) => {
   if (state.status === "loading") {
     return "Loading...";
   }
 
   if (state.status === "error") {
     return `Error: ${state.error.toUpperCase()}`;
+    //                     ^?
   }
 
   if (state.status === "success") {
@@ -1724,7 +1746,6 @@ Even though the `status` and `value` variables are separate, TypeScript keeps tr
 
 ```typescript
 // hovering over `status` shows
-
 const status: "error" | "success";
 ```