Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript #178

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
More typescript convert
gstark committed Jul 26, 2021
commit d54e5292486ed9341e1f12980d8fe350dd1dde50
8 changes: 4 additions & 4 deletions lessons/js-dom/index.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: JavaScript and the DOM
title: TypeScript and the DOM
assignment:
- scoreboard
tags:
- mdn-content
---

In this lesson we will learn how to use JavaScript code to interact with our web
pages. Without JavaScript our browsers cannot manipulate page beyond the static
In this lesson we will learn how to use TypeScript code to interact with our web
pages. Without TypeScript our browsers cannot manipulate page beyond the static
version present when the page is first loaded.

We will learn how to access the `Document Object Model` and use JavaScript to
We will learn how to access the `Document Object Model` and use TypeScript to
read, add, change, and remove elements from it.
27 changes: 18 additions & 9 deletions lessons/js-modules/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: JavaScript Modules
title: TypeScript Modules
---

---
@@ -30,9 +30,9 @@ Modules help us to:

---

## Modules in JavaScript
## Modules in TypeScript

^ Prior to a few years ago, no support for modules existed in the JavaScript
^ Prior to a few years ago, no support for modules existed in the TypeScript
language.

---
@@ -74,11 +74,12 @@ The short answer? [Kind of.](https://caniuse.com/#feat=es6-module)

## What does a module look like?

```javascript
```typescript
// lib/randomInteger.js
const randomInteger = (min, max) => {
function randomInteger(min: number, max: number) {
min = Math.ceil(min)
max = Math.floor(max)

return Math.floor(Math.random() * (max - min)) + min
}

@@ -95,11 +96,19 @@ console.log(`You just rolled a ${role}!`)

## Modules can export more than one thing

```javascript
```typescript
// lib/util.js
export const squareRoot = Math.sqrt
export const square = x => x * x
export const diagonalLength = (x, y) => squareRoot(square(x) + square(y))
export function squareRoot(number: number) {
return Math.sqrt(number)
}

export function square(x: number) {
return x * x
}

export function diagonalLength(x: number, y: number) {
return squareRoot(square(x) + square(y))
}

// main.js
import { diagonalLength } from './lib/util'
21 changes: 15 additions & 6 deletions lessons/js-modules/lecture.md
Original file line number Diff line number Diff line change
@@ -74,11 +74,12 @@ The short answer? [Kind of.](https://caniuse.com/#feat=es6-module)

## What does a module look like?

```javascript
```typescript
// lib/randomInteger.js
const randomInteger = (min, max) => {
function randomInteger(min: number, max: number) {
min = Math.ceil(min)
max = Math.floor(max)

return Math.floor(Math.random() * (max - min)) + min
}

@@ -95,11 +96,19 @@ console.log(`You just rolled a ${role}!`)

## Modules can export more than one thing

```javascript
```typescript
// lib/util.js
export const squareRoot = Math.sqrt
export const square = x => x * x
export const diagonalLength = (x, y) => squareRoot(square(x) + square(y))
export function squareRoot(number: number) {
return Math.sqrt(number)
}

export function square(x: number) {
return x * x
}

export function diagonalLength(x: number, y: number) {
return squareRoot(square(x) + square(y))
}

// main.js
import { diagonalLength } from './lib/util'
80 changes: 61 additions & 19 deletions lessons/js-ui-as-state/index.md
Original file line number Diff line number Diff line change
@@ -4,8 +4,8 @@ assignment:
- roshambo-js
---

In [the lesson on using JavaScript to modify the DOM](/lessons/js-dom) we
discussed how to use JavaScript to find and manipulate user interface elements.
In [the lesson on using TypeScript to modify the DOM](/lessons/js-dom) we
discussed how to use TypeScript to find and manipulate user interface elements.
Two examples of this are _toggle the state of an element each time we click it_
and _update a counter when a separate button is clicked_. In each of these cases
we are modifying some `state` of the user interface when responding to some
@@ -14,9 +14,31 @@ change.
We could implement the case of _toggle the state of an element each time we
click it_ as:

```javascript
document.querySelector('button').addEventListener('click', function (event) {
event.target.classList.toggle('enabled')
```typescript
import './style.css'

const buttonElement = document.querySelector('button')

if (buttonElement) {
buttonElement.addEventListener('click', function (event) {
const clickedElement = event.target as HTMLElement

if (clickedElement) {
clickedElement.classList.toggle('enabled')
}
})
}
```

We can use
[optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
to shorten the code:

```typescript
document.querySelector('button')?.addEventListener('click', function (event) {
const target = event.target as HTMLElement | null

target?.classList.toggle('enabled')
})
```

@@ -26,14 +48,16 @@ the presence of the class to indicate the state.
We could implement the case of _update a counter when a separate button is
clicked_ as:

```javascript
```typescript
let counter = 0

document.querySelector('button').addEventListener('click', function (event) {
document.querySelector('button')?.addEventListener('click', function () {
counter++

const counterElement = document.querySelector('.counterElement')
counterElement.innerText = counter
const counterElement = document.querySelector<HTMLElement>('.counterElement')
if (counterElement) {
counterElement.innerText = `${counter}`
}
})
```

@@ -164,9 +188,15 @@ would only need to update the variables (_state_) in our application.

## What might this code look like?

```js
```typescript
interface Transaction {
account: string
amount: number
details: string
}

// Or maybe load these from a file or an API
const transactions = []
const transactions: Transaction[] = []

function render() {
const checking = transactions
@@ -187,14 +217,26 @@ function render() {
<button>Make Deposit</button>
`

document.querySelector('body').innerHTML = html
document.querySelector('button').addEventListener('click', function () {
// Make a new transaction and add it
const newTransaction = new Transaction({ amount: 50, account: 'Checking' })
transactions.push(newTransaction)

render()
})
const body = document.querySelector('body')
if (body) {
body.innerHTML = html
}

const button = document.querySelector('button')

if (button) {
button.addEventListener('click', function () {
// Make a new transaction and add it
const newTransaction: Transaction = {
amount: 50,
account: 'Checking',
details: 'Payment for Work',
}
transactions.push(newTransaction)

render()
})
}
}
```

Loading