- Run
+
{pointToRunButton && (
<>
diff --git a/src/components/RunButtonText.tsx b/src/components/RunButtonText.tsx
index a1544d8..c575262 100644
--- a/src/components/RunButtonText.tsx
+++ b/src/components/RunButtonText.tsx
@@ -2,13 +2,13 @@
import { css, jsx } from '@emotion/core'
import Emoji from 'src/components/Emoji'
-const RunButtonText = () => (
+const RunButtonText = ({ compile }: { compile?: boolean }) => (
- Run
+ {compile ? 'Compile' : 'Run'}
)
diff --git a/src/lib/snippets.ts b/src/lib/snippets.ts
index 1e19e1a..c44392c 100644
--- a/src/lib/snippets.ts
+++ b/src/lib/snippets.ts
@@ -17,10 +17,23 @@ export const cupt = `function createState() {
state = x
}
- return {
- getState,
- setState
+ return { getState, setState }
+}`
+
+export const gkgi = `function createState() {
+ // Change to string
+ let state: string
+
+ function getState() {
+ return state
+ }
+
+ // Accepts a string
+ function setState(x: string) {
+ state = x
}
+
+ return { getState, setState }
}`
export const kiyi = `// Confused by generics code like this?
@@ -29,21 +42,60 @@ function getProperty
(
key: K
)`
-export const udpv = `function createState() {
+export const nnyl = `function createState() {
let state: number
function getState() {
return state
}
+ // setState() expects a number
function setState(x: number) {
state = x
}
- return {
- getState,
- setState
+ return { getState, setState }
+}`
+
+export const osaa = `function createState() {
+ // Change to string
+ let state: string
+
+ function getState() {
+ return state
+ }
+
+ // Accepts a string
+ function setState(x: string) {
+ state = x
+ }
+
+ return { getState, setState }
+}
+
+const { getState, setState } = createState()
+
+setState('foo')
+console.log(getState())`
+
+export const stkh = `const { getState, setState } = createState()
+
+// What happens if we use a string instead?
+setState('foo')
+console.log(getState())`
+
+export const udpv = `function createState() {
+ let state: number
+
+ function getState() {
+ return state
+ }
+
+ function setState(x: number) {
+ state = x
}
+
+ return { getState, setState }
}
const { getState, setState } = createState()
@@ -53,3 +105,27 @@ console.log(getState())
setState(2)
console.log(getState())`
+
+export const xeax = `const { getState, setState } = createState()
+
+setState('foo')
+console.log(getState())`
+
+export const zhql = `function createState() {
+ let state: number
+
+ function getState() {
+ return state
+ }
+
+ function setState(x: number) {
+ state = x
+ }
+
+ return { getState, setState }
+}
+
+const { getState, setState } = createState()
+
+setState('foo')
+console.log(getState())`
diff --git a/src/lib/theme/colors.ts b/src/lib/theme/colors.ts
index 0e03b75..9dd545a 100644
--- a/src/lib/theme/colors.ts
+++ b/src/lib/theme/colors.ts
@@ -7,11 +7,13 @@ export const allColors = {
lightGreen: '#DFE9CE',
brown: '#806538',
lightBrown: '#E9D1AC',
+ darkOrange: '#EC9602',
pink: '#FFD9CC',
white: '#FFFFFF',
white75: 'rgba(255, 255, 255, 0.75)',
paleGreen: '#C8DCC7',
- red: '#DB4003'
+ red: '#DB4003',
+ yellowHighlight: '#FFFF00'
}
const colors = (x: keyof typeof allColors) => allColors[x]
diff --git a/src/pages/generics.tsx b/src/pages/generics.tsx
index f630405..812c3a4 100644
--- a/src/pages/generics.tsx
+++ b/src/pages/generics.tsx
@@ -41,17 +41,22 @@ const Page = () => (
}
/>
- Similarly, if you feel that TypeScript generics are too
- difficult—maybe you’ve only done frontend engineering in JS and
- React/Vue, or you’re simply new to programming—this tutorial is
- for you! I’ll try to help you actually understand generics.
-
-
- (If you didn’t find TypeScript generics to be very difficult, this
- tutorial might be too easy for you.)
+ Similarly, if you feel that TypeScript generics are too difficult,
+ this tutorial is for you! I’ll try to help you actually understand
+ generics.
- )
+ ),
+ footer: {
+ content: (
+ <>
+
+ Note: If you didn’t find generics to be
+ difficult, this tutorial might be too easy for you.
+
+
+ )
+ }
},
{
title: (
@@ -110,6 +115,67 @@ const Page = () => (
)
}
},
+ {
+ title: <>What if we use a string?,
+ content: (
+ <>
+
+ Now, instead of numbers like 1 or 2,{' '}
+ what happens if we use a string like{' '}
+ 'foo'? Try to guess first, and then{' '}
+
+ press the button
+
+ .
+
+
+ lineNumber === 3 && tokenNumber > 2 && tokenNumber < 4
+ }
+ shouldHighlightResult={(lineNumber, tokenNumber) =>
+ lineNumber === 3 && tokenNumber > 2 && tokenNumber < 4
+ }
+ snippet={snippets.stkh}
+ result={
+ <>
+ Argument of type '"foo"' is not assignable to parameter of
+ type 'number'.
+
+ }
+ />
+
+ It failed to compile because setState() expects a
+ number as its argument.
+
+
+ lineNumber === 8 && tokenNumber > 4 && tokenNumber < 8
+ }
+ />
+
+ To fix this, we can change the types from number to{' '}
+ string:
+
+
+ (lineNumber === 9 && tokenNumber > 4 && tokenNumber < 8) ||
+ (lineNumber === 2 && tokenNumber > 4 && tokenNumber < 6)
+ }
+ />
+
+ It’ll now work!{' '}
+
+ Press .
+
+
+ foo} />
+
+ )
+ },
underConstructionCard
]}
/>