Generics article 5

.prettierrc

@@ -5,7 +5,7 @@
     {
       "files": "snippets/snippets/**/*.ts",
       "options": {
-        "printWidth": 49
+        "printWidth": 48
       }
     }
   ]

public/sitemap.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" 
+  xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" 
+  xmlns:xhtml="http://www.w3.org/1999/xhtml" 
+  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" 
+  xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+  <url>
+    <loc>https://ts.chibicode.com</loc>
+  </url>
+  <url>
+    <loc>https://ts.chibicode.com/generics</loc>
+  </url>
+</urlset>

snippets/snippets/generics/bfka.ts

@@ -1,12 +1,12 @@
-// We want to modify createState() to support
+// We want to modify makeState() to support
 // creating two different states:
 
 // One that only allows numbers, and…
-const numState = createState()
+const numState = makeState()
 numState.setState(1)
 console.log(numState.getState()) // 1
 
 // The other that only allows strings.
-const strState = createState()
+const strState = makeState()
 strState.setState('foo')
 console.log(strState.getState()) // foo

snippets/snippets/generics/brze.ts

@@ -1,4 +1,4 @@
-function createState<S>() {
+function makeState<S>() {
   let state: S
 
   function getState() {

snippets/snippets/generics/cbeq.ts

@@ -1,4 +1,4 @@
-const { getState, setState } = createState()
+const { getState, setState } = makeState()
 
 setState(1)
 console.log(getState())

snippets/snippets/generics/cupt.ts

@@ -1,4 +1,4 @@
-function createState() {
+function makeState() {
   let state: number
 
   function getState() {

snippets/snippets/generics/defo.ts

@@ -1,4 +1,4 @@
-function createState<S>() {
+function makeState<S>() {
   let state: S
 
   function getState() {
@@ -12,10 +12,10 @@ function createState<S>() {
   return { getState, setState }
 }
 
-const numState = createState<number>()
+const numState = makeState<number>()
 numState.setState(1)
 console.log(numState.getState())
 
-const strState = createState<string>()
+const strState = makeState<string>()
 strState.setState('foo')
 console.log(strState.getState())

snippets/snippets/generics/dngl.ts

@@ -0,0 +1,18 @@
+function makeState<
+  S extends number | string
+>() {
+  let state: S
+
+  function getState() {
+    return state
+  }
+
+  function setState(x: S) {
+    state = x
+  }
+
+  return { getState, setState }
+}
+
+// What happens if we now pass boolean to S?
+const boolState = makeState<boolean>()

snippets/snippets/generics/gjgg.ts

@@ -1,5 +1,5 @@
 // Creates a number-only state
-const numState = createState<number>()
+const numState = makeState<number>()
 numState.setState(1)
 console.log(numState.getState())
 

snippets/snippets/generics/gkgi.ts

@@ -1,4 +1,4 @@
-function createState() {
+function makeState() {
   // Change to string
   let state: string
 

snippets/snippets/generics/hkgv.ts

@@ -1,5 +1,5 @@
 // Creates a string-only state
-const strState = createState<string>()
+const strState = makeState<string>()
 strState.setState('foo')
 console.log(strState.getState())
 

snippets/snippets/generics/jdhu.ts

@@ -1,2 +1,2 @@
 // It sets S as number
-createState<number>()
+makeState<number>()

snippets/snippets/generics/llvc.ts

@@ -0,0 +1,4 @@
+// Creates a boolean-only state
+const boolState = makeState<boolean>()
+boolState.setState(true)
+console.log(boolState.getState())

snippets/snippets/generics/mngc.ts

@@ -0,0 +1 @@
+function makeState<S extends number | string>()

snippets/snippets/generics/nnyl.ts

@@ -1,4 +1,4 @@
-function createState() {
+function makeState() {
   let state: number
 
   function getState() {

snippets/snippets/generics/osaa.ts

@@ -1,4 +1,4 @@
-function createState() {
+function makeState() {
   // Change to string
   let state: string
 
@@ -14,7 +14,7 @@ function createState() {
   return { getState, setState }
 }
 
-const { getState, setState } = createState()
+const { getState, setState } = makeState()
 
 setState('foo')
 console.log(getState())

snippets/snippets/generics/qqic.ts

@@ -1,5 +1,5 @@
 // Doesn't work because the created state…
-const numAndStrState = createState()
+const numAndStrState = makeState()
 
 // Supports both numbers…
 numAndStrState.setState(1)

snippets/snippets/generics/rebo.ts

@@ -1,4 +1,4 @@
-// In the function definition of createState()
+// In the function definition of makeState()
 let state: S // <- number
 
 function setState(x: S /* <- number */) {

snippets/snippets/generics/stkh.ts

@@ -1,4 +1,4 @@
-const { getState, setState } = createState()
+const { getState, setState } = makeState()
 
 // What happens if we use a string instead?
 setState('foo')

snippets/snippets/generics/udpv.ts

@@ -1,4 +1,4 @@
-function createState() {
+function makeState() {
   let state: number
 
   function getState() {
@@ -12,7 +12,7 @@ function createState() {
   return { getState, setState }
 }
 
-const { getState, setState } = createState()
+const { getState, setState } = makeState()
 
 setState(1)
 console.log(getState())

snippets/snippets/generics/xeax.ts

@@ -1,4 +1,4 @@
-const { getState, setState } = createState()
+const { getState, setState } = makeState()
 
 setState('foo')
 console.log(getState())

snippets/snippets/generics/ystu.ts

@@ -1,4 +1,4 @@
-function createState() {
+function makeState() {
   let state: number | string
 
   function getState() {

snippets/snippets/generics/zhql.ts

@@ -1,4 +1,4 @@
-function createState() {
+function makeState() {
   let state: number
 
   function getState() {
@@ -12,7 +12,7 @@ function createState() {
   return { getState, setState }
 }
 
-const { getState, setState } = createState()
+const { getState, setState } = makeState()
 
 setState('foo')
 console.log(getState())

src/components/Emoji/ChickEgg.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const SvgChickEgg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 36 36" {...props}>
+    <path
+      fill="#99AAB5"
+      d="M2.75 19.333L5 16l3 3 4-2 3 3 4-6 4 3 3-1 2 3 3-3 2 4-2 7-11 5-11-2-6-6z"
+    />
+    <path
+      fill="#FFCC4D"
+      d="M29.956 14.712c.021-.287.044-.574.044-.866 0-5.943-4.324-10.864-9.996-11.819 1.189-.26 2.031-.509.996-1.027-1.115-.558-2.23.129-2.999.846h-.002C17.23 1.129 16.116.442 15 1c-1.035.518-.193.767.996 1.026C10.325 2.981 6 7.902 6 13.846c0 .292.023.579.044.867C5.562 21.313-.259 31 18 31s12.438-9.687 11.956-16.288z"
+    />
+    <path
+      fill="#F4900C"
+      d="M21 14c0 1.657-1.343 2-3 2s-3-.343-3-2 1.343-3 3-3 3 1.343 3 3z"
+    />
+    <circle fill="#662113" cx={11.5} cy={11.5} r={1.5} />
+    <circle fill="#662113" cx={24.5} cy={11.5} r={1.5} />
+    <path
+      fill="#E1E8ED"
+      d="M31 25l-3-1-4 6-3-5-2 2-4-2-3 4-3-6-3 2-3.294-7.765C2.249 18.584 2 20.016 2 21.5 2 29.509 9.164 36 18 36s16-6.491 16-14.5c0-1.244-.191-2.444-.517-3.597L31 25z"
+    />
+  </svg>
+)
+
+export default SvgChickEgg

src/components/Emoji/index.tsx

@@ -4,12 +4,14 @@ import Bird from 'src/components/Emoji/Bird'
 import CryingCat from 'src/components/Emoji/CryingCat'
 import Question from 'src/components/Emoji/Question'
 import Run from 'src/components/Emoji/Run'
+import ChickEgg from 'src/components/Emoji/ChickEgg'
 
 export const emojiToComponent = {
   bird: Bird,
   cryingCat: CryingCat,
   question: Question,
-  run: Run
+  run: Run,
+  chickEgg: ChickEgg
 }
 
 const Emoji = ({