Add Extract Object Type Values Into A Union Type as a TypeScript TIL

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1212 TILs and counting..._
+_1213 TILs and counting..._
 
 ---
 
@@ -1118,6 +1118,7 @@ _1212 TILs and counting..._
 - [Add Types To An Object Destructuring](typescript/add-types-to-an-object-destructuring.md)
 - [Compiler Checks For Unused Params And Variables](typescript/compiler-checks-for-unused-params-and-variables.md)
 - [Extract Object Type Keys Into A Union Type](typescript/extract-object-type-keys-into-a-union-type.md)
+- [Extract Object Type Values Into A Union Type](typescript/extract-object-type-values-into-a-union-type.md)
 - [Interfaces With The Same Name Are Merged](typescript/interfaces-with-the-same-name-are-merged.md)
 - [Re-Export An Imported Type](typescript/re-export-an-imported-type.md)
 - [Type Narrowing With Similarly Shaped Objects](typescript/type-narrowing-with-similarly-shaped-objects.md)

typescript/extract-object-type-values-into-a-union-type.md

@@ -0,0 +1,54 @@
+# Extract Object Type Values Into A Union Type
+
+Let's say we have an object type like the following:
+
+```typescript
+type GlobalReducerEvent = {
+    ADD_TODO: {
+        text: string
+    }
+    LOG_IN: {
+        email: string
+    }
+    DELETE_TODO: {
+        todo_id: number
+    }
+}
+```
+
+We can use the [indexed access
+type](https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html)
+to access the value indexed at one the type keys. This works a lot like
+JavaScript's object access.
+
+```typescript
+type AddTodoType = GlobalReducerEvent['ADD_TODO'];
+/*
+type AddTodoType = {
+  text: string
+}
+*/
+```
+
+Where it gets more interesting and differs from JavaScript's object access is
+when we do an indexed access of a union type.
+
+```typescript
+type TypesForEvents = GlobalReducerEvent[keyof GlobalReducerEvent];
+/*
+type TypesForEvents = {
+  text: string
+} | {
+  email: string
+} | {
+  todo_id: number
+}
+*/
+```
+
+The result is a union of each of the values whose keys had matches in the
+union.
+
+Where this gets more interesting and useful is when we use it as part of a
+mapped type like I explore in [Breaking Down a Complex Mapped
+Type](https://dev.to/jbranchaud/breaking-down-a-complex-mapped-type-in5).