Mapped types (#13)

chibicode · web-flow · commit 828f1e985aa3 · 2019-12-06T20:00:04.000-08:00
diff --git a/snippets/snippets/todo/jkjo.ts b/snippets/snippets/todo/jkjo.ts
@@ -0,0 +1,15 @@
+// By default, the properties of Todo are
+// NOT read-only
+type Todo = {
+  id: number
+  text: string
+  done: boolean
+}
+
+// By using Readonly<> here, it makes the
+// properties readonly only within toggleTodo()
+function toggleTodo(
+  todo: Readonly<Todo>
+): Todo {
+  // ...
+}
diff --git a/snippets/snippets/todo/nxyl.ts b/snippets/snippets/todo/nxyl.ts
@@ -0,0 +1,6 @@
+// Readonly<...> makes each property readonly
+type Todo = Readonly<{
+  id: number
+  text: string
+  done: boolean
+}>
diff --git a/snippets/snippets/todo/qaqa.ts b/snippets/snippets/todo/qaqa.ts
@@ -0,0 +1,7 @@
+type Foo = {
+  bar: number
+}
+
+type ReadonlyFoo = Readonly<Foo>
+
+// ReadonlyFoo is { readonly bar: number }
diff --git a/src/components/Emoji/Readonly.tsx b/src/components/Emoji/Readonly.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+const SvgReadonly = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 143 36" {...props}>
+    <g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+      <rect fill="#806538" x={0} y={0} width={143} height={36} rx={4} />
+      <rect fill="#FF9156" x={89} y={3} width={40} height={30} rx={4} />
+      <path
+        d="M4.84,25 L4.84,10.3 L8.88,10.3 C9.4933364,10.3 10.0933304,10.4066656 10.68,10.62 C11.2666696,10.8333344 11.7666646,11.173331 12.18,11.64 C12.5933354,12.106669 12.8866658,12.639997 13.06,13.24 C13.2333342,13.840003 13.32,14.4466636 13.32,15.06 C13.32,15.6733364 13.2333342,16.2766637 13.06,16.87 C12.8866658,17.4633363 12.5933354,17.993331 12.18,18.46 C11.8866652,18.793335 11.5466686,19.059999 11.16,19.26 C12.6000072,21.4866778 13.32,23.399992 13.32,25 L10.52,25 C10.52,23.5866596 9.7666742,21.8533436 8.26,19.8 L7.64,19.8 L7.64,25 L4.84,25 Z M7.64,17.28 L8.88,17.28 C9.2266684,17.28 9.5399986,17.1633345 9.82,16.93 C10.1000014,16.6966655 10.2866662,16.413335 10.38,16.08 C10.4733338,15.746665 10.52,15.4066684 10.52,15.06 C10.52,14.7133316 10.4733338,14.3700017 10.38,14.03 C10.2866662,13.6899983 10.1000014,13.4033345 9.82,13.17 C9.5399986,12.9366655 9.2266684,12.82 8.88,12.82 L7.64,12.82 L7.64,17.28 Z M18.2733333,25.16 C17.6733303,25.16 17.0866695,25.0633343 16.5133333,24.87 C15.9399971,24.6766657 15.4400021,24.3566689 15.0133333,23.91 C14.5866645,23.4633311 14.2800009,22.9500029 14.0933333,22.37 C13.9066657,21.7899971 13.8133333,21.200003 13.8133333,20.6 L13.8133333,18.8 C13.8133333,18.2133304 13.8999991,17.6333362 14.0733333,17.06 C14.2466675,16.4866638 14.5366646,15.9766689 14.9433333,15.53 C15.350002,15.0833311 15.8366638,14.7566677 16.4033333,14.55 C16.9700028,14.3433323 17.5466637,14.24 18.1333333,14.24 C18.7200029,14.24 19.2966638,14.3433323 19.8633333,14.55 C20.4300028,14.7566677 20.9166646,15.0833311 21.3233333,15.53 C21.730002,15.9766689 22.0199991,16.4866638 22.1933333,17.06 C22.3666675,17.6333362 22.4533333,18.2133304 22.4533333,18.8 L22.4533333,20.96 L16.6333333,20.96 C16.6600001,21.1733344 16.7066663,21.379999 16.7733333,21.58 C16.8800005,21.9000016 17.0766652,22.1566657 17.3633333,22.35 C17.6500014,22.5433343 17.9533317,22.64 18.2733333,22.64 C18.5133345,22.64 18.7466655,22.5933338 18.9733333,22.5 C19.2000011,22.4066662 19.3899992,22.2666676 19.5433333,22.08 C19.6966674,21.8933324 19.8066663,21.6866678 19.8733333,21.46 L22.4733333,22.4 C22.2733323,22.9733362 21.9633354,23.4799978 21.5433333,23.92 C21.1233312,24.3600022 20.6233362,24.6766657 20.0433333,24.87 C19.4633304,25.0633343 18.8733363,25.16 18.2733333,25.16 Z M16.6333333,18.44 L19.6333333,18.44 C19.6066665,18.239999 19.5666669,18.0466676 19.5133333,17.86 C19.4333329,17.5533318 19.2633346,17.2933344 19.0033333,17.08 C18.743332,16.8666656 18.4533349,16.76 18.1333333,16.76 C17.8133317,16.76 17.5233346,16.8666656 17.2633333,17.08 C17.003332,17.2933344 16.8333337,17.5533318 16.7533333,17.86 C16.6999997,18.0466676 16.6600001,18.239999 16.6333333,18.44 Z M26.0466667,25.16 C25.6199979,25.16 25.2000021,25.0833341 24.7866667,24.93 C24.3733313,24.7766659 24.0233348,24.5300017 23.7366667,24.19 C23.4499986,23.8499983 23.2466673,23.4733354 23.1266667,23.06 C23.0066661,22.6466646 22.9466667,22.2200022 22.9466667,21.78 C22.9466667,21.3266644 23.0266659,20.8866688 23.1866667,20.46 C23.3466675,20.0333312 23.5933317,19.6633349 23.9266667,19.35 C24.2600017,19.0366651 24.6333313,18.7900009 25.0466667,18.61 C25.4600021,18.4299991 25.8899978,18.3033337 26.3366667,18.23 C26.7833356,18.1566663 27.2333311,18.12 27.6866667,18.12 L28.6266667,18.12 L28.6266667,17.88 C28.6266667,17.6533322 28.5566674,17.4433343 28.4166667,17.25 C28.276666,17.0566657 28.0966678,16.926667 27.8766667,16.86 C27.6566656,16.793333 27.4333345,16.76 27.2066667,16.76 C26.9666655,16.76 26.7333345,16.7966663 26.5066667,16.87 C26.2799989,16.9433337 26.0900008,17.0733324 25.9366667,17.26 C25.7833326,17.4466676 25.6933335,17.6599988 25.6666667,17.9 L23.0666667,17 C23.2000007,16.4133304 23.4799979,15.8966689 23.9066667,15.45 C24.3333355,15.0033311 24.8399971,14.6900009 25.4266667,14.51 C26.0133363,14.3299991 26.6066637,14.24 27.2066667,14.24 C27.6200021,14.24 28.0333313,14.2799996 28.4466667,14.36 C28.8600021,14.4400004 29.2533315,14.579999 29.6266667,14.78 C30.0000019,14.980001 30.3299986,15.24 30.6166667,15.56 C30.9033348,15.8800016 31.1099994,16.2433313 31.2366667,16.65 C31.363334,17.0566687 31.4266667,17.4666646 31.4266667,17.88 L31.4266667,25 L28.6266667,25 L28.6266667,23.84 L28.6066667,23.88 C28.3133319,24.2933354 27.936669,24.6099989 27.4766667,24.83 C27.0166644,25.0500011 26.5400025,25.16 26.0466667,25.16 Z M27.0466667,22.64 C27.3400015,22.64 27.6166654,22.5766673 27.8766667,22.45 C28.136668,22.3233327 28.3266661,22.126668 28.4466667,21.86 C28.5666673,21.593332 28.6266667,21.3200014 28.6266667,21.04 L28.6266667,20.64 L27.6866667,20.64 C27.4066653,20.64 27.1300014,20.6666664 26.8566667,20.72 C26.583332,20.7733336 26.3300012,20.8899991 26.0966667,21.07 C25.8633322,21.2500009 25.7466667,21.4799986 25.7466667,21.76 C25.7466667,21.9466676 25.8199993,22.1166659 25.9666667,22.27 C26.1133341,22.4233341 26.2833324,22.5233331 26.4766667,22.57 C26.670001,22.6166669 26.8599991,22.64 27.0466667,22.64 Z M35.36,25.16 C34.8399974,25.16 34.346669,25.0233347 33.88,24.75 C33.413331,24.4766653 33.046668,24.106669 32.78,23.64 C32.513332,23.173331 32.3300005,22.6800026 32.23,22.16 C32.1299995,21.6399974 32.08,21.1200026 32.08,20.6 L32.08,18.8 C32.08,18.2799974 32.1299995,17.7600026 32.23,17.24 C32.3300005,16.7199974 32.513332,16.226669 32.78,15.76 C33.046668,15.293331 33.413331,14.9233347 33.88,14.65 C34.346669,14.3766653 34.8399974,14.24 35.36,14.24 C35.7733354,14.24 36.1733314,14.3299991 36.56,14.51 C36.9466686,14.6900009 37.2666654,14.946665 37.52,15.28 C37.6000004,15.3866672 37.6799996,15.4999994 37.76,15.62 L37.76,10.3 L40.56,10.3 L40.56,25 L37.76,25 L37.76,23.78 C37.6799996,23.9000006 37.6000004,24.0133328 37.52,24.12 C37.2666654,24.453335 36.9466686,24.7099991 36.56,24.89 C36.1733314,25.0700009 35.7733354,25.16 35.36,25.16 Z M36.38,22.64 C36.6866682,22.64 36.9566655,22.5266678 37.19,22.3 C37.4233345,22.0733322 37.5766663,21.8100015 37.65,21.51 C37.7233337,21.2099985 37.76,20.9066682 37.76,20.6 L37.76,18.8 C37.76,18.4933318 37.7233337,18.1900015 37.65,17.89 C37.5766663,17.5899985 37.4233345,17.3266678 37.19,17.1 C36.9566655,16.8733322 36.6866682,16.76 36.38,16.76 C36.0733318,16.76 35.7900013,16.8666656 35.53,17.08 C35.2699987,17.2933344 35.0966671,17.5533318 35.01,17.86 C34.9233329,18.1666682 34.88,18.4799984 34.88,18.8 L34.88,20.6 C34.88,20.9200016 34.9233329,21.2333318 35.01,21.54 C35.0966671,21.8466682 35.2699987,22.1066656 35.53,22.32 C35.7900013,22.5333344 36.0733318,22.64 36.38,22.64 Z M45.5333333,25.16 C44.9466637,25.16 44.3700028,25.0566677 43.8033333,24.85 C43.2366638,24.6433323 42.750002,24.3166689 42.3433333,23.87 C41.9366646,23.4233311 41.6466675,22.9133362 41.4733333,22.34 C41.2999991,21.7666638 41.2133333,21.1866696 41.2133333,20.6 L41.2133333,18.8 C41.2133333,18.2133304 41.2999991,17.6333362 41.4733333,17.06 C41.6466675,16.4866638 41.9366646,15.9766689 42.3433333,15.53 C42.750002,15.0833311 43.2366638,14.7566677 43.8033333,14.55 C44.3700028,14.3433323 44.9466637,14.24 45.5333333,14.24 C46.1200029,14.24 46.6966638,14.3433323 47.2633333,14.55 C47.8300028,14.7566677 48.3166646,15.0833311 48.7233333,15.53 C49.130002,15.9766689 49.4199991,16.4866638 49.5933333,17.06 C49.7666675,17.6333362 49.8533333,18.2133304 49.8533333,18.8 L49.8533333,20.6 C49.8533333,21.1866696 49.7666675,21.7666638 49.5933333,22.34 C49.4199991,22.9133362 49.130002,23.4233311 48.7233333,23.87 C48.3166646,24.3166689 47.8300028,24.6433323 47.2633333,24.85 C46.6966638,25.0566677 46.1200029,25.16 45.5333333,25.16 Z M45.5333333,22.64 C45.8533349,22.64 46.143332,22.5333344 46.4033333,22.32 C46.6633346,22.1066656 46.8366662,21.8466682 46.9233333,21.54 C47.0100004,21.2333318 47.0533333,20.9200016 47.0533333,20.6 L47.0533333,18.8 C47.0533333,18.4799984 47.0100004,18.1666682 46.9233333,17.86 C46.8366662,17.5533318 46.6633346,17.2933344 46.4033333,17.08 C46.143332,16.8666656 45.8533349,16.76 45.5333333,16.76 C45.2133317,16.76 44.9233346,16.8666656 44.6633333,17.08 C44.403332,17.2933344 44.2300004,17.5533318 44.1433333,17.86 C44.0566662,18.1666682 44.0133333,18.4799984 44.0133333,18.8 L44.0133333,20.6 C44.0133333,20.9200016 44.0566662,21.2333318 44.1433333,21.54 C44.2300004,21.8466682 44.403332,22.1066656 44.6633333,22.32 C44.9233346,22.5333344 45.2133317,22.64 45.5333333,22.64 Z M50.5066667,25 L50.5066667,14.4 L53.3066667,14.4 L53.3066667,15.62 C53.3866671,15.4999994 53.4666663,15.3866672 53.5466667,15.28 C53.8000013,14.946665 54.1166648,14.6900009 54.4966667,14.51 C54.8766686,14.3299991 55.2733313,14.24 55.6866667,14.24 C56.1000021,14.24 56.4999981,14.3299991 56.8866667,14.51 C57.2733353,14.6900009 57.5933321,14.946665 57.8466667,15.28 C58.1000013,15.613335 58.296666,15.9733314 58.4366667,16.36 C58.5766674,16.7466686 58.6766664,17.1466646 58.7366667,17.56 C58.796667,17.9733354 58.8266667,18.3866646 58.8266667,18.8 L58.8266667,25 L56.0266667,25 L56.0266667,18.8 C56.0266667,18.4933318 55.9900004,18.1900015 55.9166667,17.89 C55.843333,17.5899985 55.6933345,17.3266678 55.4666667,17.1 C55.2399989,16.8733322 54.9733349,16.76 54.6666667,16.76 C54.3599985,16.76 54.0933345,16.8733322 53.8666667,17.1 C53.6399989,17.3266678 53.4900004,17.5899985 53.4166667,17.89 C53.343333,18.1900015 53.3066667,18.4933318 53.3066667,18.8 L53.3066667,25 L50.5066667,25 Z M60.3,25 L60.3,22.48 L62.54,22.48 L62.54,12.82 L60.58,12.82 L60.58,10.3 L65.34,10.3 L65.34,22.48 L67.3,22.48 L67.3,25 L60.3,25 Z M70.5333333,29.1 L70.5333333,28.96 C70.5333333,28.1066624 70.6199991,27.4200026 70.7933333,26.9 L71.5733333,24.58 L69.4533333,18.86 C69.3066659,18.459998 69.1866671,18.0533354 69.0933333,17.64 C68.9999995,17.2266646 68.9233336,16.8100021 68.8633333,16.39 C68.803333,15.9699979 68.7733333,15.5533354 68.7733333,15.14 L68.7733333,14.4 L71.5733333,14.4 L71.5733333,15.14 C71.5733333,15.6333358 71.6266661,16.1233309 71.7333333,16.61 C71.8400005,17.0966691 71.9599993,17.5799976 72.0933333,18.06 L72.8933333,20.68 L73.7733333,18.06 C74.1200017,17.0066614 74.2933333,16.0333378 74.2933333,15.14 L74.2933333,14.4 L77.0933333,14.4 L77.0933333,15.14 C77.0933333,16.273339 76.8666689,17.5133266 76.4133333,18.86 L73.4533333,27.7 C73.3733329,27.9266678 73.3333333,28.3466636 73.3333333,28.96 L73.3333333,29.1 L70.5333333,29.1 Z M85.6866667,22.9 L77.9066667,18.88 L77.9066667,16.52 L85.6866667,12.5 L86.7666667,14.38 L80.2466667,17.7 L86.7666667,21.02 L85.6866667,22.9 Z"
+        fill="#FFFFFF"
+        fillRule="nonzero"
+      />
+      <polygon
+        fill="#FFFFFF"
+        fillRule="nonzero"
+        points="132.38 22.9 131.3 21.02 137.82 17.7 131.3 14.38 132.38 12.5 140.16 16.52 140.16 18.88"
+      />
+      <path
+        d="M93.6,25 L93.6,12.82 L90.84,12.82 L90.84,10.3 L99.16,10.3 L99.16,12.82 L96.4,12.82 L96.4,25 L93.6,25 Z M104.133333,25.16 C103.546664,25.16 102.970003,25.0566677 102.403333,24.85 C101.836664,24.6433323 101.350002,24.3166689 100.943333,23.87 C100.536665,23.4233311 100.246668,22.9133362 100.073333,22.34 C99.8999991,21.7666638 99.8133333,21.1866696 99.8133333,20.6 L99.8133333,18.8 C99.8133333,18.2133304 99.8999991,17.6333362 100.073333,17.06 C100.246668,16.4866638 100.536665,15.9766689 100.943333,15.53 C101.350002,15.0833311 101.836664,14.7566677 102.403333,14.55 C102.970003,14.3433323 103.546664,14.24 104.133333,14.24 C104.720003,14.24 105.296664,14.3433323 105.863333,14.55 C106.430003,14.7566677 106.916665,15.0833311 107.323333,15.53 C107.730002,15.9766689 108.019999,16.4866638 108.193333,17.06 C108.366668,17.6333362 108.453333,18.2133304 108.453333,18.8 L108.453333,20.6 C108.453333,21.1866696 108.366668,21.7666638 108.193333,22.34 C108.019999,22.9133362 107.730002,23.4233311 107.323333,23.87 C106.916665,24.3166689 106.430003,24.6433323 105.863333,24.85 C105.296664,25.0566677 104.720003,25.16 104.133333,25.16 Z M104.133333,22.64 C104.453335,22.64 104.743332,22.5333344 105.003333,22.32 C105.263335,22.1066656 105.436666,21.8466682 105.523333,21.54 C105.61,21.2333318 105.653333,20.9200016 105.653333,20.6 L105.653333,18.8 C105.653333,18.4799984 105.61,18.1666682 105.523333,17.86 C105.436666,17.5533318 105.263335,17.2933344 105.003333,17.08 C104.743332,16.8666656 104.453335,16.76 104.133333,16.76 C103.813332,16.76 103.523335,16.8666656 103.263333,17.08 C103.003332,17.2933344 102.83,17.5533318 102.743333,17.86 C102.656666,18.1666682 102.613333,18.4799984 102.613333,18.8 L102.613333,20.6 C102.613333,20.9200016 102.656666,21.2333318 102.743333,21.54 C102.83,21.8466682 103.003332,22.1066656 103.263333,22.32 C103.523335,22.5333344 103.813332,22.64 104.133333,22.64 Z M112.226667,25.16 C111.706664,25.16 111.213336,25.0233347 110.746667,24.75 C110.279998,24.4766653 109.913335,24.106669 109.646667,23.64 C109.379999,23.173331 109.196667,22.6800026 109.096667,22.16 C108.996666,21.6399974 108.946667,21.1200026 108.946667,20.6 L108.946667,18.8 C108.946667,18.2799974 108.996666,17.7600026 109.096667,17.24 C109.196667,16.7199974 109.379999,16.226669 109.646667,15.76 C109.913335,15.293331 110.279998,14.9233347 110.746667,14.65 C111.213336,14.3766653 111.706664,14.24 112.226667,14.24 C112.640002,14.24 113.039998,14.3299991 113.426667,14.51 C113.813335,14.6900009 114.133332,14.946665 114.386667,15.28 C114.466667,15.3866672 114.546666,15.4999994 114.626667,15.62 L114.626667,10.3 L117.426667,10.3 L117.426667,25 L114.626667,25 L114.626667,23.78 C114.546666,23.9000006 114.466667,24.0133328 114.386667,24.12 C114.133332,24.453335 113.813335,24.7099991 113.426667,24.89 C113.039998,25.0700009 112.640002,25.16 112.226667,25.16 Z M113.246667,22.64 C113.553335,22.64 113.823332,22.5266678 114.056667,22.3 C114.290001,22.0733322 114.443333,21.8100015 114.516667,21.51 C114.59,21.2099985 114.626667,20.9066682 114.626667,20.6 L114.626667,18.8 C114.626667,18.4933318 114.59,18.1900015 114.516667,17.89 C114.443333,17.5899985 114.290001,17.3266678 114.056667,17.1 C113.823332,16.8733322 113.553335,16.76 113.246667,16.76 C112.939998,16.76 112.656668,16.8666656 112.396667,17.08 C112.136665,17.2933344 111.963334,17.5533318 111.876667,17.86 C111.79,18.1666682 111.746667,18.4799984 111.746667,18.8 L111.746667,20.6 C111.746667,20.9200016 111.79,21.2333318 111.876667,21.54 C111.963334,21.8466682 112.136665,22.1066656 112.396667,22.32 C112.656668,22.5333344 112.939998,22.64 113.246667,22.64 Z M122.4,25.16 C121.81333,25.16 121.23667,25.0566677 120.67,24.85 C120.10333,24.6433323 119.616669,24.3166689 119.21,23.87 C118.803331,23.4233311 118.513334,22.9133362 118.34,22.34 C118.166666,21.7666638 118.08,21.1866696 118.08,20.6 L118.08,18.8 C118.08,18.2133304 118.166666,17.6333362 118.34,17.06 C118.513334,16.4866638 118.803331,15.9766689 119.21,15.53 C119.616669,15.0833311 120.10333,14.7566677 120.67,14.55 C121.23667,14.3433323 121.81333,14.24 122.4,14.24 C122.98667,14.24 123.563331,14.3433323 124.13,14.55 C124.696669,14.7566677 125.183331,15.0833311 125.59,15.53 C125.996669,15.9766689 126.286666,16.4866638 126.46,17.06 C126.633334,17.6333362 126.72,18.2133304 126.72,18.8 L126.72,20.6 C126.72,21.1866696 126.633334,21.7666638 126.46,22.34 C126.286666,22.9133362 125.996669,23.4233311 125.59,23.87 C125.183331,24.3166689 124.696669,24.6433323 124.13,24.85 C123.563331,25.0566677 122.98667,25.16 122.4,25.16 Z M122.4,22.64 C122.720002,22.64 123.009999,22.5333344 123.27,22.32 C123.530001,22.1066656 123.703333,21.8466682 123.79,21.54 C123.876667,21.2333318 123.92,20.9200016 123.92,20.6 L123.92,18.8 C123.92,18.4799984 123.876667,18.1666682 123.79,17.86 C123.703333,17.5533318 123.530001,17.2933344 123.27,17.08 C123.009999,16.8666656 122.720002,16.76 122.4,16.76 C122.079998,16.76 121.790001,16.8666656 121.53,17.08 C121.269999,17.2933344 121.096667,17.5533318 121.01,17.86 C120.923333,18.1666682 120.88,18.4799984 120.88,18.8 L120.88,20.6 C120.88,20.9200016 120.923333,21.2333318 121.01,21.54 C121.096667,21.8466682 121.269999,22.1066656 121.53,22.32 C121.790001,22.5333344 122.079998,22.64 122.4,22.64 Z"
+        fill="#FFFFFF"
+        fillRule="nonzero"
+      />
+    </g>
+  </svg>
+)
+
+export default SvgReadonly
diff --git a/src/components/Emoji/index.tsx b/src/components/Emoji/index.tsx
@@ -16,6 +16,7 @@ import UpdatedData from 'src/components/Emoji/UpdatedData'
 import UpdatedUI from 'src/components/Emoji/UpdatedUi'
 import Sweat from 'src/components/Emoji/Sweat'
 import TransformTypechecked from 'src/components/Emoji/TransformTypechecked'
+import Readonly from 'src/components/Emoji/Readonly'
 
 export const emojiToComponent = {
   bird: Bird,
@@ -33,7 +34,8 @@ export const emojiToComponent = {
   updatedUi: UpdatedUI,
   updatedData: UpdatedData,
   sweat: Sweat,
-  transformTypechecked: TransformTypechecked
+  transformTypechecked: TransformTypechecked,
+  readonly: Readonly
 }
 
 export const EmojiWrapper = ({
diff --git a/src/lib/snippets.ts b/src/lib/snippets.ts
@@ -514,6 +514,22 @@ function toggleTodo(todo: Todo): Todo {
   // ...
 }`
 
+export const jkjo = `// By default, the properties of Todo are
+// NOT read-only
+type Todo = {
+  id: number
+  text: string
+  done: boolean
+}
+
+// By using Readonly<> here, it makes the
+// properties readonly only within toggleTodo()
+function toggleTodo(
+  todo: Readonly<Todo>
+): Todo {
+  // ...
+}`
+
 export const lieq = `type Todo = {
   id: number
   text: string
@@ -560,6 +576,21 @@ export const ntau = `function toggleTodo(todo: Todo): Todo {
   }
 }`
 
+export const nxyl = `// Readonly<...> makes each property readonly
+type Todo = Readonly<{
+  id: number
+  text: string
+  done: boolean
+}>`
+
+export const qaqa = `type Foo = {
+  bar: number
+}
+
+type ReadonlyFoo = Readonly<Foo>
+
+// ReadonlyFoo is { readonly bar: number }`
+
 export const qbgu = `// Returns a new todo object
 // with the opposite boolean value
 // for the "done" proprty.
diff --git a/src/pages/todo.tsx b/src/pages/todo.tsx
